七牛上传

 

HTML中：

<div class="fileUpload-main">
    <div class="upload-img">
        <div class="imgItem" v-for="(item,index) in addForm.dialogImageUrl" :key="index">
            <img :src="item"><i class="el-icon-circle-close" @click="delUploadImg(index)"></i>
        </div>
        <div v-if="addForm.dialogImageUrl.length < 1" class="addImg" @click="handleAddImg">
            <i class="el-icon-plus"></i>
        </div>
    </div>

    <el-dialog style="text-align:left" title="上传图片" :visible.sync="dialogVisible" width="30%">
        <div class="modal-body newpic" style="display: block;">
            <div class="control-group" style="margin-top:28px;">
                <div class="newImg-class">
                    <label class="control-label">本地图片：</label>
                        <div class style>
                            <button type="button" @click="openFile" class="saveBtn" id="qiniuFileBtn">上传图片</button>
                            <input ref="qiniuUpload" data-limitsize="300" type="file" multiple="true" @change="uploadInputchange" name="qiniuUpload" style="display:none;">
                        </div>
                </div>
                <div class="controls" style="margin-left: 123px; margin-top: 20px;">
                    <div>
                        <span style="color: #999;">
                            支持后缀jpg、png、gif的图片,为了保证小程序的加载速度，图片大小最好不要超过1MB
                        </span>
                    </div>
                </div>
           </div>
        </div>
     </el-dialog>
</div>

js中：

// 引入七牛的js
import * as qiniu from 'qiniu-js'

//定义变量
data: {
        dialogVisible: false, //弹出框隐藏
        token: "", //获取到的七牛token
        file: "", //选择要上传的文件
        pathPrex: "xxxxx/", //七牛存储控制默认url前缀
        key: "", //上传成功之后返回的图片后缀

        addForm: {
            dialogImageUrl: []
        }
}

mounted() {
        this._initToken();
}

//定义方法

methods: {
            // 图片上传函数开始
        _initToken() {  //获取七牛所需的token
            let ctx = this;
            $.ajax({
                type: 'GET',
                url: /*后端地址*/,
                headers: {
                    
                },
                success: function (data) {
                    console.log(data);
                    if(data.ret == 0){
                        ctx.token = data.model.token;
                    }
                },
                error: function (data) {
                    console.log(data)
                }
            })
        },
        delUploadImg: function (index) { //删除当前下标的图片
            this.addForm.dialogImageUrl.splice(index,1);
        },
        handleAddImg: function() {  //显示弹出框
            this.dialogVisible = true;
        },
        openFile: function () {   //间接点击上传图片按钮
            this.$refs.qiniuUpload.click();
        },
        dealKey() {  //获取当前的年月 保证图片的唯一性
            let year = new Date().getFullYear();
            let month = new Date().getMonth();
            return `${year}/${month}`;
        },
        uploadInputchange: function () {  //图片上传至七牛 相关配置
            let ctx = this;
            this.file = this.$refs.qiniuUpload.files[0];
            let file = this.file;
            // console.log(file);
            let uploadToken = this.token;
            let qnConfig = {
                useCdnDomain: true,
                region: null
            };
            let key = `${this.dealKey()}/${Math.floor(Math.random() * 999999)}/${file.name}`;
            let putExtra = {
                fname: file.name.split(".")[0], //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: null
            };
            let observer = {
                next: function(res) {},
                error: function(err) {},
                complete: function(res) {
                    ctx.key = res.key;
                    let newImg = `${ctx.pathPrex}${res.key}`;
                    ctx.addForm.dialogImageUrl.push(newImg);
                    ctx.dialogVisible = false;
                }
            };
            let observable = qiniu.upload(file, key, uploadToken, putExtra, qnConfig);
            let subscription = observable.subscribe(observer); // 上传开始
        },
        // 图片上传函数结束
}