el-upload图片上传

element图片上传，我总共摸索了几天，才大体上把它搞清。写完之后一段时间不去管它，又会忘记得一干二净，所以记录下来:

我们写图片上传首先要想好几个问题：

1、自动上传还是手动上传？？
2、多图上传还是单图上传？？（我都用了，现在只想记录多图得情况）设置: :multiple="true"
3、什么时候用on-change，什么时候用before-upload

---

一、关于自动和手动，我们都知道，设置auto-upload="true"就是自动上传，这个参数非必要，我不填写应该默认就是自动上传。action="上传图片的接口"这样就能实现自动上传了，但是我这个人比较懒，不想在里面拼全地址，加上我axios已经封装好了，然后就用http-request里面调上传的接口，设置auto-upload="true"，http-request里面自动就会执行。以下是我的示例代码：

          <el-upload
            ref="upload"
            :multiple="true"
            :show-file-list="true"
            :limit = "9"
            :file-list="imgFiles"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
            class="editor-slide-upload"
            :action="''"
            list-type="picture-card"
            :http-request="handelUpload"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>                  

二、多图上传的两种模式：
1.多图上传之自动上传
以上是自动上传，但是性质是多图上传，我可以按住ctrl一次选中多张图片，但是在上传的时候，图片仍然是一张一张的传过去的。如下图：

1651737400(1).jpg
请求了三次接口，我这里是表单提交，在上传成功后把图片放入json数组中。
image.png
上传成功以后右上角会有一个绿色的对勾（ √ ）
有对勾是因为我在on-success的时候将上传成功的文件:file-list="imgFiles"中imgFiles添加进去了。
image.png

2.多图上传之手动上传

直接放示例代码：

      <el-upload
        ref="upload"
        :multiple="true"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :auto-upload="false"
        :headers="headers"
        :limit = "9"
        :on-change="uploadSectionFile" 
        class="editor-slide-upload"
        action="''"
        list-type="picture-card"
      >
        <el-button size="small" type="primary">
          点击上传
        </el-button>
      </el-upload>

这个图片上传的模式跟之前的不同，我这里直接是在选中多张图片以后请求接口，也就是多张一起传，点击上传按钮才执行上传的操作。其实这里是不需要用到http-request的，在:auto-upload="false"的时候
http-request并不会自动执行，如果想在里面写请求的方法，可以在点击按钮的时候执行http-request,或者this.$refs.upload.submit()
三、on-change和before-upload
我认为，在多图上传，但是模式是自动上传的时候（即图片一张一张的传），用before-upload去操作图片压缩之类的事情；
在多图上传手动触发的时候用on-change比较好
on-change有时候跟before-upload是差不多的，但是有时候on-change在上传成功和上传失败的时候会触发，写完代码过去好几天了，已经不记得这种情况。
on-change的file有raw属性，而before-upload的file没有raw属性

补充：

http-request别人说有一个隐藏的参数，其实并不然，before-upload中resolve(data)有值并且传对了，他才能接收一个参数例httpRequest(file) file才能接收得到