vue + elementUI 项目里使用qiniu插件实现上传图片功能

总结：按照七牛官网一步步来就可以实现。

官网链接：https://developer.qiniu.com/kodo/sdk/1283/javascript

具体实现步骤：

1、npm 安装qiniu依赖

npm install qiniu-js

2、npm 安装 plupload依赖

npm install plupload --save

3、在上传页面引入插件依赖

var qiniu = require('qiniu-js')

4、DOM部分：el-upload控件的 :http-request="qiniuUpload" 绑定上传图片函数

<el-upload action="" :http-request="qiniuUpload" list-type="picture-card" :limit="addRowDialog.limit" :disabled="addRowDialog.uploadDisabled" :auto-upload="true" :before-upload="beforeUpload" :on-remove="handleRemove">
   <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
   <img width="100%" :src="addRowForm.bdImageurl" alt="">
</el-dialog>

5、js部分：qiniuUpload()

qiniuUpload(event){//将图片上传七牛
            //console.log(event.file);debugger
            var paramObj={key:"tmp_bj_" + Date.parse(new Date())};

            uptoken(paramObj).then(res => {
                if(res.code==0){
                    var qiniu_token = res.data.uptoken;//uptoken() 接口返回token权限
                    //console.log(qiniu_token);

                    /*  file: blob对象，上传的文件; 
                        key: string, 文件资源名
                        token: string, 上传验证信息，前端通过接口请求后端获得
                        putExtra: object, 
                        config: object
                    */
                    var putExtra={
                        fname: "",//文件原文件名
                        params: {},//用来放置自定义变量
                        mimeType: ["image/png", "image/jpeg", "image/gif"],//用来限定上传文件类型，指定null时自动判断文件类型。
                    }
                    var config={
                        useCdnDomain: true,//表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                        region: qiniu.region.z2,//选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
                    }
                    var observable  = qiniu.upload(event.file, paramObj.key, qiniu_token, putExtra, config);
                    var subscription = observable.subscribe({
                        next(res){
                            // next: 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进度信息。
                            //console.log(res);
                        },
                        error(err){
                            // 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object
                            //console.log(err);
                        }, 
                        complete(res){
                            // 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息，具体返回结构取决于后端sdk的配置
                            //res.key --上传之后接口返回该图片在七牛上的名称
                            var domainName ="http://image.myDomainName.com/";//你在七牛上创建的域名
                            var imgUrl = domainName + res.key;//最终可访问的图片url
                        }
                    }) // 上传开始
                }else{
                    _this.$message({
                        message: res.message,
                        type: 'error',
                        duration:1500
                    });
                }
            });
        },

来源：CSDN

作者：Queen-Shir

链接：https://blog.csdn.net/qq_36069339/article/details/103810777

标签

qiniu

vue

var