vue3+element plus-ui el-upload文件上传

568 阅读1分钟

element plus-ui 版本:2.5.1

可能每个版本的el-upload上传的方式不一样吧~我参考了别的很多的文件上传都不好使,以下是我的上传方式:

dom::::::::

dom
<el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :headers="headers"
          :on-change="changeImgeRever"
          :auto-upload="true"
          v-model="idNumberReverseUrl">
              <img v-if="imageUrlRever" :src="imageUrlRever" class="avatar" />
             <img :src="ImgTwo" v-else class="avatar"/>
      </el-upload>


js
// uploadImgUrlPost 是请求地址
//headers 是设置类型 header :{'Content-Type':'multipart/form-data'}
 const imageUrlRever = ref('')
const changeImgeRever = (res,f) =>{
        let aimg = URL.createObjectURL(res.raw) // 这一点呀,跟别的版本不一样,,
        imageUrlRever.value = aimg
        const file = f[0];
        let formData = new FormData()
        formData.append('file',res.raw)

        axios.post(uploadImgUrlPost,formData,{headers:headers}).then(res =>{
            if(res.data.code == 200){
                 list.imageUrlRever =res.data.url;
            }
        })
    }

页面上面有6个图片上传的,原本可以试试用类型来区别是哪个在坐图片上传的,结果on-change事件传参有问题。 before-upload传值取不到,暂时还没找到更好的解决办法,兄弟们有没更好的解决方案呀~求教