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

LZQ plus

发布于 2019.03.26 18:36 阅读 5152 评论 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.com、up-z0.qiniup.com和upload.qiniup.com

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

data：postData是一个对象，具体下文中会提到（里面必须有token字段）。

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

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

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

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

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

</el-dialog>

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

file-list：存放的上传图片集合，里面的单个对象必须有name和url字段。

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

      }

handleAvatarSuccess和handleRemove里面的逻辑之所以那样写是因为特殊需求，灵活使用。

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

发表评论