Vue encapsulates an example of a simple and lightweight upload file component

This article mainly introduces an example of Vue encapsulating a simple and lightweight upload file component. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

1. Some problems encountered before

There are many requirements for uploading files in projects. In the process of implementation using the existing UI framework, there will always be some inexplicable bugs for some unknown reason. For example, when using a certain upload component, it is clearly marked (:multiple="false"), but in fact it is still possible to select multiple files, and multiple files are still sent when uploading; for example, as long as (:file-list="fileList" is added) ") attribute, when I hope to manually control the upload list, the upload event this.refs.[upload (component ref)].submit() will not work and cannot be transmitted. In short, I am too lazy to see how to implement it. I am using the function, and the interface itself still needs to be rewritten. If I insist on using it, it will add a lot of unnecessary logic and style code to the project...

Used before The view frameworks used by Vue for projects include element-ui, zp-ui as a supplement within the team, and iview. The framework is easy to use, but you often can’t use it for your own projects. Especially the interface created by our design girl is very different from the existing framework. Changing the source code is inefficient and can easily lead to unknown bugs, so I take the time to do it myself. Encapsulates this upload component.

2. Code and introduction

Parent component

<template>
 <p class="content">
 <label for="my-upload">
  <span>上传</span>
 </label>
  <my-upload
   ref="myUpload"
   :file-list="fileList"
   action="/uploadPicture"
   :data="param"
   :on-change="onChange"
   :on-progress="uploadProgress"
   :on-success="uploadSuccess"
   :on-failed="uploadFailed"
   multiple
   :limit="5"
   :on-finished="onFinished">
  </my-upload>
  <button @click="upload" class="btn btn-xs btn-primary">Upload</button>
 </p>
</template>

<script>
import myUpload from &#39;./components/my-upload&#39;
export default {
 name: &#39;test&#39;,
 data(){
  return {
  fileList: [],//上传文件列表，无论单选还是支持多选，文件都以列表格式保存
  param: {param1: &#39;&#39;, param2: &#39;&#39; },//携带参数列表
  }
 },
 methods: {
  onChange(fileList){//监听文件变化，增减文件时都会被子组件调用
  this.fileList = [...fileList];
  },
  uploadSuccess(index, response){//某个文件上传成功都会执行该方法，index代表列表中第index个文件
  console.log(index, response);
  },
  upload(){//触发子组件的上传方法
  this.$refs.myUpload.submit();
  },
  removeFile(index){//移除某文件
  this.$refs.myUpload.remove(index);
  },
  uploadProgress(index, progress){//上传进度，上传时会不断被触发，需要进度指示时会很有用
  const{ percent } = progress;
  console.log(index, percent);
  },
  uploadFailed(index, err){//某文件上传失败会执行，index代表列表中第index个文件
  console.log(index, err);
  },
  onFinished(result){//所有文件上传完毕后（无论成败）执行，result: { success: 成功数目, failed: 失败数目 }
  console.log(result);
  }
 },
 components: {
  myUpload
 }
}
</script>

The parent component handles business-related logic. I specially added index parameters so that the interface can directly operate the value when displaying the uploaded results. Not all methods are required and can be used according to needs.

Subcomponent

<template>
<p>
 <input style="display:none" @change="addFile" :multiple="multiple" type="file" :name="name" id="my-upload"/>
</p>
</template>

Upload the file, the html part is just a pair of tags, I don’t like it to be complicated and wordy

<script>
export default {
 name: &#39;my-upload&#39;,
 props: {
 name: String,
 action: {
  type: String,
  required: true
 },
 fileList: {
  type: Array,
  default: []
 },
 data: Object,
 multiple: Boolean,
 limit: Number,
 onChange: Function,
 onBefore: Function,
 onProgress: Function,
 onSuccess: Function,
 onFailed: Function,
 onFinished: Function
 },
 methods: {}//下文主要是methods的介绍，此处先省略
}
</script>

This defines the attribute values ​​that need to be passed from the parent component to the child component. Note that the method is also passed as an attribute here, which is acceptable.

The components I wrote are not as complete and comprehensive as those released by popular frameworks. In addition, in view of the problem mentioned at the beginning that the bound file-list cannot be uploaded (more likely because my posture is wrong), I I also want to try my best to solve this problem I encountered, so I hope to have absolute control over the file list. In addition to action, file-list is also used as an attribute that must be passed by the parent component. (The attribute name of the parent component is connected with "-", corresponding to the camel case naming in the child component prop)

3. Main upload function

methods: {
  addFile, remove, submit, checkIfCanUpload
}

There are a total of 4 methods in methods, including adding files, removing files, submitting, and testing (testing before uploading). They are described one by one below:

1. Add file

addFile({target: {files}}){//input标签触发onchange事件时，将文件加入待上传列表
 for(let i = 0, l = files.length; i < l; i++){
 files[i].url = URL.createObjectURL(files[i]);//创建blob地址，不然图片怎么展示？
 files[i].status = &#39;ready&#39;;//开始想给文件一个字段表示上传进行的步骤的，后面好像也没去用......
 }
 let fileList = [...this.fileList];
 if(this.multiple){//多选时，文件全部压如列表末尾
 fileList = [...fileList, ...files];
 let l = fileList.length;
 let limit = this.limit;
 if(limit && typeof limit === "number" && Math.ceil(limit) > 0 && l > limit){//有数目限制时，取后面limit个文件
  limit = Math.ceil(limit);
//  limit = limit > 10 ? 10 : limit;
  fileList = fileList.slice(l - limit);
 }
 }else{//单选时，只取最后一个文件。注意这里没写成fileList = files;是因为files本身就有多个元素（比如选择文件时一下子框了一堆）时，也只要一个
 fileList = [files[0]];
 }
 this.onChange(fileList);//调用父组件方法，将列表缓存到上一级data中的fileList属性
 },

2. Remove file

This is simple. Sometimes when the parent component forks a file, an index is passed That’s it.

remove(index){
 let fileList = [...this.fileList];
 if(fileList.length){
 fileList.splice(index, 1);
 this.onChange(fileList);
 }
},

3. Submit upload

Two methods are used here, fetch and native method. Since fetch does not support obtaining the upload progress, If you do not need a progress bar or simulate the progress yourself or the XMLHttpRequest object does not exist, it will be simpler to use fetch to request the upload logic

submit(){
 if(this.checkIfCanUpload()){
 if(this.onProgress && typeof XMLHttpRequest !== 'undefined')
  this.xhrSubmit();
 else
  this.fetchSubmit();
 }
},

4. Based on upload Two sets of logic, two methods xhrSubmit and fetchSubmit are encapsulated here

fetchSubmit

fetchSubmit(){
 let keys = Object.keys(this.data), values = Object.values(this.data), action = this.action;
 const promises = this.fileList.map(each => {
 each.status = "uploading";
 let data = new FormData();
 data.append(this.name || 'file', each);
 keys.forEach((one, index) => data.append(one, values[index]));
 return fetch(action, {
  method: 'POST',
  headers: {
   "Content-Type" : "application/x-www-form-urlencoded"
  },
  body: data
 }).then(res => res.text()).then(res => JSON.parse(res));//这里res.text()是根据返回值类型使用的，应该视情况而定
 });
 Promise.all(promises).then(resArray => {//多线程同时开始，如果并发数有限制，可以使用同步的方式一个一个传，这里不再赘述。
 let success = 0, failed = 0;
 resArray.forEach((res, index) => {
  if(res.code == 1){
  success++;         //统计上传成功的个数，由索引可以知道哪些成功了
  this.onSuccess(index, res);
  }else if(res.code == 520){   //约定失败的返回值是520
  failed++;         //统计上传失败的个数，由索引可以知道哪些失败了
  this.onFailed(index, res);
  }
 });
 return { success, failed };   //上传结束，将结果传递到下文
 }).then(this.onFinished);      //把上传总结果返回
},

xhrSubmit

xhrSubmit(){
  const _this = this;
 let options = this.fileList.map((rawFile, index) => ({
 file: rawFile,
 data: _this.data,
    filename: _this.name || "file",
    action: _this.action,
    onProgress(e){
     _this.onProgress(index, e);//闭包，将index存住
    },
    onSuccess(res){
     _this.onSuccess(index, res);
    },
    onError(err){
     _this.onFailed(index, err);
    }
  }));
 let l = this.fileList.length;
 let send = async options => {
 for(let i = 0; i < l; i++){
  await _this.sendRequest(options[i]);//这里用了个异步方法，按次序执行this.sendRequest方法，参数为文件列表包装的每个对象，this.sendRequest下面紧接着介绍
 }
 };
 send(options);
},

This is based on the upload source code of element-ui

sendRequest(option){

 const _this = this;
  upload(option);

 function getError(action, option, xhr) {
  var msg = void 0;
  if (xhr.response) {
   msg = xhr.status + ' ' + (xhr.response.error || xhr.response);
  } else if (xhr.responseText) {
   msg = xhr.status + ' ' + xhr.responseText;
  } else {
   msg = 'fail to post ' + action + ' ' + xhr.status;
  }

  var err = new Error(msg);
  err.status = xhr.status;
  err.method = 'post';
  err.url = action;
  return err;
 }

 function getBody(xhr) {
  var text = xhr.responseText || xhr.response;
  if (!text) {
   return text;
  }

  try {
   return JSON.parse(text);
  } catch (e) {
   return text;
  }
 }

 function upload(option) {
  if (typeof XMLHttpRequest === 'undefined') {
   return;
  }

  var xhr = new XMLHttpRequest();
  var action = option.action;

  if (xhr.upload) {
   xhr.upload.onprogress = function progress(e) {
    if (e.total > 0) {
     e.percent = e.loaded / e.total * 100;
    }
    option.onProgress(e);
   };
  }

  var formData = new FormData();

  if (option.data) {
   Object.keys(option.data).map(function (key) {
    formData.append(key, option.data[key]);
   });
  }

  formData.append(option.filename, option.file);

  xhr.onerror = function error(e) {
   option.onError(e);
  };

  xhr.onload = function onload() {
   if (xhr.status < 200 || xhr.status >= 300) {
    return option.onError(getError(action, option, xhr));
   }

   option.onSuccess(getBody(xhr));
  };

  xhr.open(&#39;post&#39;, action, true);

  if (option.withCredentials && &#39;withCredentials&#39; in xhr) {
   xhr.withCredentials = true;
  }

  var headers = option.headers || {};

  for (var item in headers) {
   if (headers.hasOwnProperty(item) && headers[item] !== null) {
    xhr.setRequestHeader(item, headers[item]);
   }
  }
  xhr.send(formData);
  return xhr;
 }
}

Finally add the verification before the request

checkIfCanUpload(){
 return this.fileList.length ? (this.onBefore && this.onBefore() || !this.onBefore) : false;
},

If the parent component defines the onBefore method and returns false, or the file list is empty, the request will not be sent.

The code part is finished. When using it, as long as the on-progress attribute is present and the XMLHttpRequest object is accessible, the request will be sent using the native method. Otherwise, the request will be sent using fetch (the progress will not be displayed).

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax form asynchronous file upload example code

Cascade operation of drop-down menu

Ajax realizes three-level cascading of provinces and municipalities

The above is the detailed content of Vue encapsulates an example of a simple and lightweight upload file component. For more information, please follow other related articles on the PHP Chinese website!