el-upload图片上传

2022-05-05  本文已影响0人  goodTime_luo7

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-changebefore-upload
我认为,在多图上传,但是模式是自动上传的时候(即图片一张一张的传),用before-upload去操作图片压缩之类的事情;
在多图上传手动触发的时候用on-change比较好
on-change有时候跟before-upload是差不多的,但是有时候on-change在上传成功和上传失败的时候会触发,写完代码过去好几天了,已经不记得这种情况。
on-changefileraw属性,而before-uploadfile没有raw属性

补充:

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

上一篇 下一篇

猜你喜欢

热点阅读