实现el-upload上传多张图片和文件功能

用来element里面的组件 然后改了改 大体方法都差不多 两种写法 代码具体如下：

1)接口直接写在html

<el-col :span="12">
            <el-form-item label="附件" prop="attachments" :rules="[]">
              <el-upload
                class="upload-demo"
                ref="upload"
                multiple
                :action="`${urlapi}v1/common/base/upload`"  //接口
                :limit="limit"
                :file-list="fileList"
                :on-success="onSuccess"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>

定义变量
data:{
 limit: 2, //限制传几张
      accessory: []
} 
 //域名
created () {
    this.urlapi = process.env.VUE_APP_SERVER_URL
  },
​
 // 文件上传成功
    onSuccess (res) {
      const info = res.data
      this.accessory.push(info) // 把info里面的值一起 赋给accessory这个变量
      if (this.accessory.length === this.limit) {
        const fileList = this.accessory.join(',') // 看传的字符类型
        this.inputForm.attachments = fileList
      }
    },

2）base64的方法上传

<el-upload
            :http-request="uploadImg"
            :show-file-list="false"
            class="avatar-uploader"
            action=""
            accept="image/jpg, image/jpeg, image/png"
          >
            <el-image
              v-if="form.image"
              :src="`${baseUrl}/common/viewImage?imagepath=${form.image}`"
              class="avatar"
              fit="contain"
            >
              <template #error>
                <div class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </template>
            </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
          

   // 图片转换base64 
    getBase64Image (file) {
      const promise = new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          resolve(e)
        }
      })
​
      return promise
    },
    
async uploadImg (res) {
      const { file } = res
      const PicBase = await this.getBase64Image(file)
      try {
        const obj = await this.addUpload(PicBase.target.result)
        this.inputForm.covePic = obj.fileUrl
      } catch (error) {
        console.log(error)
      }
    },
    
      // 上传图片接口
    addUpload (file) {
      this.$http({
        url: `/v1/common/base/upload`,
        method: 'post',
        data: { file }  //传参
      }).then(({ data }) => {
        this.inputForm.covePic = data.cover
      })
    },
    
    或者 二者选择其一就好了
        // 2.上传图片接口 
    addUpload () {
     let file =this.inputElem.covePic; //获取文件信息 
      let data = new FormData();  //构建实例对象
       data.append("file", file); //实例化对象实例
      this.$http({
        url: `/v1/common/base/upload`,
        method: 'post',
        data: { data }  //传参
      }).then(({ data }) => {
        this.inputForm.covePic = data.cover
      })
    },
​

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！