تحقيق وظيفة خطوة بخطوة لتحميل الصور باستخدام axios

Axios مكتبة HTTP تعتمد على Promise يمكن استخدامها في المتصفح وnode.js.

ميزات

إنشاء XMLHttpRequests من المتصفح

إنشاء طلبات HTTP من node.js

دعم API Promise

إعتراض الطلبات والإجابات

تحويل بيانات الطلب والإجابة

إلغاء الطلب

تحويل بيانات JSON تلقائيًا

دعم الدفاع ضد XSRF على الجانب الآخر

سأقدم لكم فيما يلي كيفية استخدام axios لإنشاء وظيفة شريط التقدم في إرسال الصور، وسيكون المحتوى المقدم كالتالي:

　في المشاريع التي أجريتها مؤخرًا، يجب على صفحة الهاتف إرسال عدة عشرات من الصور، رغم أننا قمنا بضغط الصور، إلا أن حجمها لا يزال كبيرًا، إذا كان هناك مشكلة في بطاقة الشبكة، فإن وقت الإرسال سيكون سيئًا، وإذا كان هناك تحميل مستمر، فإن المستخدم لا يعرف كم من الوقت يمر على الإرسال، لذا من الأفضل عرض شريط التقدم والنسبة المئوية لإرسال البيانات؛

　　المشروع يستخدم إطار عمل vuejs، ويستخدم mint-ui كإطار عمل واجهة المستخدم؛ يتم استخدام axios الذي يوصى به من قبل vue رسميًا (هو حقًا قوي جدًا)；في دليل axios الرسمي، تمت تقديم كيفية استخدام الحدث الأصليحدث معالجة تقدم التحميلالمرجع (مزيد من التفاصيل هنا، حيث هناك شرح باللغة الصينية للدليل الرسمي لـ axios):

 onUploadProgress: function (progressEvent) {
  // معالجة الحدث الأصلي للتقدم في التحميل
 ,

　　بما أن يتم استخدام vuejs، فإنه من المريح لإدارة الطلبات إلى واجهات البرمجة، لذلك يجب إدارة ذلك بشكل مركزي. إذا تم وضعها في كل عنصر، فإن ذلك يجعل الصيانة والإدارة غير مريحة في المستقبل؛ في ملف reqwest.js، تم تعريف طريقة uploadPhoto، والتي تحتوي على ثلاثة معلمات، وهي المعلمات، واثنين من الدوال التراجعية، المعلمات هي المعلمات التي تحتاج إلى تحميل الصورة، والبالغ الأول هو الحصول على البيانات الخاصة بتقدم التحميل، والبالغ الثاني هو الحصول على البيانات الخاصة بالنجاح أو الفشل، وعرض البيانات التي يتم استرجاعها من الخادم للقيام بالخطوة التالية في الصفحة.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ // الحدث الأصلي للحصول على تقدم التحميل
        if(progressEvent.lengthComputable){
          // يبين الخصائص lengthComputable ما إذا كان يمكن قياس كمية العمل الإجمالي الذي يجب إكماله وكمية العمل التي تم إكمالها أم لا
          // إذا كان lengthComputable = false، لن يمكن الحصول على progressEvent.total و progressEvent.loaded
          callback1(progressEvent);
        }
      ,
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    )
  }

استخدام عنصر Progress من مكتبة mint-ui، في طريقة data يحدد المتغير inside هذا العنصر، والذي يكون نوعه number، في وقت التعريف، يجب الانتباه؛　

<mt-progress :value="precent" :bar-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

استيراد ملف reqwest.js هذا للحصول على طريقة uploadPhoto، وتحديث الصفحة بشكل ديناميكي باستخدام خاصية $nextTick.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   )
}
  if(res.code === '200'){
    MessageBox.alert('تم تحميل الصورة بنجاح').then(action => {
     console.log('ok');
    });
  }
)

　　بناءً على الطريقة المذكورة أعلاه، تم تحقيق عرض تقدم تحميل الصور وكذلك النسبة المئوية، والباقي هو واجهة المستخدم، حسب تفضيلاتك لتخصيص تحقيق احتياجاتك المثالية...

الخاتمة

ما تم ذكره أعلاه هو كيفية استخدام axios لإنشاء شريط التقدم في تحميل الصور، آمل أن يكون هذا مفيداً لكم، إذا كان لديكم أي استفسارات، فلا تترددوا في ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت. وأنا أتمنى أن تكونوا قد دعمتم موقع呐喊 التعليمي!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق بالملكية، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت ويتم تحميله بشكل مستقل، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل المتعلق، إذا تم التحقق من ذلك، فإن هذا الموقع سيرفع المحتوى المزعوم فوراً.