element-admin 七牛云上传图片,拿走不谢

LZQ plus

发布于 2019.03.26 18:36 阅读 3640 评论 0

好久没写了言简意赅,直接介绍el-upload怎么实现七牛云上传图片以及其中的注意事项。

 

首先先看下面一串代码:

      <el-form-item >

        <el-upload

          action="http://up-z0.qiniup.com"

          list-type="picture-card"

          multiple

          :data="postData"

          :on-success="handleAvatarSuccess"

          :on-error="handleError"

          :before-upload="beforeAvatarUpload"

          :on-preview="handlePictureCardPreview"

          :on-remove="handleRemove"

          :file-list="upImgList"

          :limit="6"

          :on-exceed="overLimitNum"

        >

          <i class="el-icon-plus"></i>

        </el-upload>

        <el-dialog :visible.sync="dialogVisible">

          <img width="100%" :src="dialogImageUrl" alt="">

        </el-dialog>

      </el-form-item>

action:后面的url就是七牛云的上传服务器域名,七牛云官网有介绍,不同的url代表着不同区域——https://developer.qiniu.com/kodo/api/1251/bput

上传到华东区的域名为up.qiniup.comup-z0.qiniup.comupload.qiniup.com

上传到华北区的域名为up-z1.qiniup.comupload-z1.qiniup.com

 

datapostData是一个对象,具体下文中会提到(里面必须有token字段)。

 

on-success:文件上传成功时的钩子,一般用来处理下文中的file-list="upImgList"

 

on-error:文件上传失败时的钩子,一般用来提示操作。

 

before-upload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。这里一般处理上传图片的格式、大小等要求,不符合要求的是在这个地方pass掉。

 

on-preview:点击文件列表中已上传的文件时的钩子,可以完成观看发大图效果,但是必须配合上文中的

<el-dialog :visible.sync="dialogVisible">

          <img width="100%" :src="dialogImageUrl" alt="">

 </el-dialog>

 

on-remove:文件列表移除文件时的钩子,处理删除逻辑。

 

file-list:存放的上传图片集合,里面的单个对象必须有nameurl字段。

 

limit:上传文件个数限制。

 

on-exceed:当文件个数超出限制时所触发的钩子,一般都是弹出提示对话框操作。

 

然后是data数据:

        upImgList:[],

        //七牛云一系列参数

        dialogImageUrl: '',

        dialogVisible: false,

        postData: {

          token: ''

        },

        domain:''

其中的domain就是自己在七牛云里配置的域名,token则是通过后台请求所得的上传凭证。

 

核心methods   

   //-------------------------------

      handleRemove(file, fileList) {

        console.log("handleRemove------",file, fileList);

        let list = [];

        if(fileList.length == 0){

          this.upImgList = list;

        }else{

          for(var i =0;i<fileList.length;i++){

            list.push({

              name:fileList[i].name,

              url:fileList[i].url

            })

          }

          this.upImgList = list;

        }

      },

      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;

        this.dialogVisible = true;

      },

      handleAvatarSuccess(res, file) {   //上传成功后在图片框显示图片

        //this.imageUrl = this.domain+'/'+ res.key;

        this.upImgList.push({

          name:res.hash,

          url:this.domain+'/'+res.key

        });

      },

      handleError(res) {   //显示错误

        console.log("handleError ---- ",res)

      },

      overLimitNum(files, fileList){

        this.$message.warning('抱歉,最多上传6张图片!')

      },

      beforeAvatarUpload(file) {    //在图片提交前进行验证

        const isJPG = file.type === 'image/jpeg'

        const isPNG = file.type === 'image/png'

        const isLt2M = (file.size / 1024 / 1024) < 2



        if (!isJPG&&!isPNG) {

          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')

        }

        if (!isLt2M) {

          this.$message.error('上传头像图片大小不能超过 2MB!')

        }

        return (isJPG || isPNG) && isLt2M

      }

handleAvatarSuccesshandleRemove里面的逻辑之所以那样写是因为特殊需求,灵活使用。

 

附七牛云上传图片的流程图: