el-upload上传图片不使用action属性

2021-02-19 01:17

阅读：595

标签：length 属性 == fileread 照片墙 png size 需求 list

   action="#"
   ref="upload"
   list-type="picture-card"    //照片墙的样式
   :on-change="handleChange"
   :http-request="httpRequest"
   :before-upload="beforeAvatarUpload">

注：不使用action属性就设置为#，然后自定义上传http-request，element文档里有。action属性不能去掉

根据个人需求，我这里只要一张，每次选择就会把前一张删除

handleChange(file, fileList) {
   if (fileList.length > 1) {
       fileList.shift()
   }
},

这里也可以对上传的图片做一些限制

beforeAvatarUpload(file) {
   const isImg = file.size / 1024 / 1024 if (!isImg) {
      this.$message.error(‘上传头像图片大小不能超过 2MB!‘)
   }
    
   const isType = file.type === "image/png"
   const isType2 = file.type === "image/jpeg"

   if (!isType && !isType2) {
     this.$message.error(‘上传头像图片格式为png或jpg‘)
   }
   return (isType || isType2) && isImg
},

然后就是自定义的上传方法

httpRequest(data) {
  let _this = this  // 这里要转一下是因为在下面的function里 this的指向发生了变化
  let rd = new FileReader()
  let file = data.file
  rd.readAsDataURL(file)
  rd.onloadend = function(e) {
     _this.addData.icon = this.result
  }
},
（_this.addData.icon 是新增的时候图片的参数字段，this.result就是选中的图片转成的base64）

最后清空el-upload

this.$refs.upload.clearFiles();

el-upload上传图片不使用action属性

标签：length 属性 == fileread 照片墙 png size 需求 list

原文地址：https://www.cnblogs.com/reround/p/12937941.html

上一篇：原生js给DOM元素添加一个或者多个类名

下一篇：将px转成vw 缩放插件:postcss-px-to-viewport

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：el-upload上传图片不使用action属性
文章链接：http://soscw.com/index.php/essay/57295.html

亲，登录后才可以留言！

el-upload上传图片不使用action属性

评论

热门文章

推荐文章

最新文章

置顶文章