Use method after encapsulation:

import uploadimage from '.. /components/uploadimage' ============= components: { uploadimage: uploadimage, }, =========== <template> <uploadimage></uploadimage> </template> ===============Copy the code


Use the wrapped invocation method Use the wrapped invocation method 

This.$store.state. Upimageurl takes the default display image. This. code. store. MIT (' EditUpImageurl ',image) ============= this.$store.state.imageurls let imagebot={}; imagebot.value = '123.jpg'; imagebot.label = '123.jpg'; imagebot.uid = '123.jpg'; imagebot.url = value.headUrl this.$store.commit('editimageurls',imagebot); Save the default display picture = = = = = = = = = = = = = = = = = = remove methods this.$store.com MIT (' editupimageurlzaro ', '); this.$store.commit('editimageurlszaro','');Copy the code

Package as component uploadfile.vue

html

<el-upload
  action="#"
  list-type="picture-card"
  :before-upload="beforeUpload"
  :http-request="beforeUpload"
  :file-list="upimageurl"
  accept="file"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
Copy the code

The data variable

upimageurl: [],
imageurls: [],
dialogImageUrl: '',
dialogVisible: false,
Copy the code

Methds method

handleRemove(file, fileList) { let uid=file.uid; const ind=this.imageurls.findIndex((imageobj)=> imageobj.label==uid); delete this.imageurls[ind]; }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeUpload(file) { let code = this.$store.state.uploadConfig; let fd = new FormData(); Fd. append("file", file); M let uid=file.uid; let url = code.action; // let XHR = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Authorization", code.token); Var imagebot={}; var rem=this; xhr.onload = function (e) { if (xhr.status==200) { var res = JSON.parse(xhr.responseText); imagebot.value=res.data; imagebot.label=uid; rem.imageurls.push(imagebot); }else{}} xhr.upload. onloadStart = function (e) {}; Xhr.upload. Onerror = function (e) {}; xhr.upload.onerror = function (e) {}; Xhr.upload. onloadEnd = function (e) {// console.log(' upload ended ')}; xhr.upload. onloadEnd = function (e) {// console.log(' upload ended ')}; xhr.send(fd) },Copy the code