七牛上传：

七牛官方文档[https://www.npmjs.com/package/qiniu-js](https://www.npmjs.com/package/qiniu-js) 最近做项目遇到需要将图片上传至七牛，再将七牛反馈的地址传给后端，第一次用，记录一下；

---

使用input框：

我们上传七牛需要后端给我们一个token，然后我们用这个token去请求七牛服务器；

<template>
    <div class="ft-plant-upload-button">
        <el-button @click="chooseFile">选择文件</el-button>
        <input type="file" ref="evfile" @change="uploadFile" style="display:none"  accept=".png, .jpeg, .gif, .jpg" >
    </div>
</template>
 
 
<script>
import * as qiniu from 'qiniu-js';
export default {
  methods: {
    chooseFile(){
      this.$refs.evfile.click();
    },
    async uploadFile(evfile){
        let {data:{uploadToken: token, cdn }} = await api.getToken();//这里是我请求七牛的token和我们部署的服务器的地址；
        let file = evfile.target.files[0] //Blob 对象，上传的文件
        let fileTypes = ["image/png", "image/jpeg", "image/gif", "image/jpg"];
        let maxSize = 1024 * 1024 * 10;
        // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
        let { name: key, size, type } = file;
        if (size >= maxSize) {
            this.$alert('上传文件最大不可超过10MB', '警告', {
                confirmButtonText: '确定',
                showClose: false
            })
            return false;
        }
        if (fileTypes.indexOf(type) === -1) {
            this.$alert('.png, .jpeg, .gif, .jpg格式的文件', '警告', {
                confirmButtonText: '确定',
                showClose: false
            })
            return false;
        }
        
        // 下面这些配置可以去看官方文档找到自己需要的来进行配置
        let config = {
            useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            region: qiniu.region.z2,     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
            domain: cdn, 
        };
 
        let putExtra = {
            fname: key,  //文件原文件名
            params: {}, //用来放置自定义变量
            mimeType: fileTypes  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        const observable = await qiniu.upload(data.dist, key, token, putExtra, config)
        observable.subscribe({
            next: (result) => {
            },
            error: (errResult) => {
                console.error(errResult);
            },
            complete: (result) => {
            	//成功的回调
               let url = `${cdn}/${result.key}`;
            }
        });
    },
  }}
</script>

---

使用element上传：

使用element和使用input是差不多的就不详细描述了，同样的我们需要拿到token再去请求七牛

<template>
    <div class="events page-out-white">
        <div class="upload-warp">
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :http-request="uploadFile"
                :before-upload="beforeUpload"
                action="http://upload.qiniup.com"
                :multiple="false"
                :limit="1">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </div>
    </div>
</template>

<script>
import * as qiniu from 'qiniu-js';
export default {
    methods: {
        async beforeUpload(file) {
            let fileTypes = ["application/vnd.android.package-archive"];
            if (fileTypes.indexOf(file.type) === -1) {
                this.$alert('只能上传apk格式的文件', '警告', {
                    confirmButtonText: '确定',
                })
                this.$refs.upload.clearFiles();
            }
        },
        async uploadFile(e) {
        	if(!e) return;
         	let {data:{uploadToken, cdn }} = await api.getToken();
         	let responseConfig = {
					token：uploadToken，
					cdn 
			}
            let file = e.file //Blob 对象，上传的文件
            let fileTypes = ["application/vnd.android.package-archive"];
            // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
            let { name: key, size, type } = file;
            if (fileTypes.indexOf(type) === -1) return;
            let config = {
                useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: qiniu.region.z2,     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
                domain: responseConfig .cdn,
            };
    
            let putExtra = {
                fname: key,  //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
            };
            const options = {
                quality: 1,
                noCompressIfLarger: true
            }
            const observable = await qiniu.upload(file, key, responseConfig .token, putExtra, config)
            await observable.subscribe({
                next: (result) => {
                },
                error: (errResult) => {
                    console.log(errResult)
                },
                complete: async (result) => {
                   let url =`${responseConfig .cdn}/${result.key}`;
                    this.$refs.upload.clearFiles();
                }
            });
        },           
    }
}
</script>

---

总结：

和普通的上传文件差不多，只是需要调用七牛的api；

本文地址：https://blog.csdn.net/weixin_44251585/article/details/110532655