element-image file upload, multi-image merge request (all kinds of pits)

A better solution is to upload the front-end to Qiniu Cloud. Compression on the back-end is a waste of performance.

Upload files/pictures from the front end to Qiniu Cloud

First picture

Insert picture description here

Recognize the attribute: file-list="fileList" If
the file is uploaded, the selected file will be loaded on the page for us to preview. This attribute is the array of photos stored in the preview. (If you do not configure this property, you can of course also see the preview, but you cannot operate on it, such as delete)
auto-upload="false" Whether to upload directly after selecting the file. Remember this is very important, the documentation hardly mentions
The official explanation of on-change is "the hook when the file status changes, it will be called when adding files, uploading successfully and uploading failed", it will also be called when you add a file. When using this, remember to set the second attribute to false. 记得把预览数组赋值到本地fileList变量, So as to operate the preview
image
```
        this.fileList=fileList
       } ```
```
ref="upload" Then there is the registration example. After adding the file, you have to upload it. The official upload method is not written. . . . this.$refs.upload.submit(); That's it

然后是做一个删除某个预览图片, I really want to complain about the official document. You must use the first attribute to manipulate the fileList. Then, as shown in the figure, you can see a delete button. Click on it to return to the array index without parameters. Then it means you have to loop this fileList to match the file

      let index=0
      //没有提供下标值，使用uid识别
      fileList.forEach((el,idx) => {
      
      
        if(el.uid==file.uid) {
      
      
          index=idx
        }
      });
      this.fileList.splice(index,1)
      console.log(this.fileList)
    },

Pictures that do not meet the restrictions will not be added to the preview (not added). This is the content of the onchange function. The fileList is a parameter, not a local variable.

beforeonchange(file,fileList) {
    
    
        this.fileList=fileList
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024  < 500;
        if (!isLt2M) {
    
    
          this.$message.error('上传图片大小不能超过 500KB');
          fileList.pop(0,fileList.length-1)
        }
    },

Echo, after using manual upload, you will find that it can be displayed normally before uploading. You print the fileList and find that it is

[ {
    
     "status": "ready", "name": "22222.png", "size": 159646, "percentage": 0, "uid": 1608627375006, "raw": {
    
     "uid": 1608627375006 }, "url": "blob:http://127.0.0.1:8801/39afb095-4e76-4dc1-964a-d7cb70ddadba" } ]

Instead of a traditional URL address, what should I do when it is echoed?
In fact, you can re-assign the value: file-list="fileList" to display it, and you can view the big picture and delete it normally.

 fileList ：[{
    
    url:' 回显url '} ]           //uid不用管，你操作过后系统会自动加上

Merge and upload multiple images with one request! ! ! ! ! ! ! !

The final renderings, there are three files in formdata (key refers to custom, such as my files)
Insert picture description here

The aciton in the configuration is useless, because we upload it manually
: http-request = "uploadFile" Use this to override the default behavior (which is really the official website ****), it means this.$refs.upload.submit()
to be replaced with uploadFile, the former running code = trigger uploadFile function. You write ajax and axios in the latter, which is the so-called overwrite default upload.
Here comes the point. Just create a new formData, you can understand that a form is generated at the js level. You append content inside, and finally submit the form.
If you upload 3 pictures, then this.$refs.upload.submit()when executing = execute uploadFile three times, and append three things to it
The back-end adaptation is just fine, and the form is submitted.
In my code, params is used to provide id to the backend to associate id and image

	uploadFile(file) {
    
    
      this.formDate.append('files', file.file);
    },
    uploadimg(data) {
    
    
      this.formDate = new FormData()
        this.$refs.upload.submit()  //开始遍历
        let url=process.env.BASE_API+'/xxxx/remarkUploadImg'
        axios({
    
    
          method: 'post',
          url:url,
          withCredentials: true,
          data:this.formDate,
          params:{
    
    remarkId:data},
          headers:{
    
    "Content-Type": "multipart/form-data"}
        }).then(res=> {
    
    
          this.$refs.upload.clearFiles() 

        })
    },

Little knowledge, the file size is expressed in bytes

Insert picture description here