七牛上传图片
程序员文章站
2022-03-15 13:08:30
七牛上传：七牛官方文档[https://www.npmjs.com/package/qiniu-js](https://www.npmjs.com/package/qiniu-js)最近做项目遇到需要将图片上传至七牛，再将七牛反馈的地址传给后端，第一次用，记录一下；使用input框： 我们上传七牛需要后端给我们一个token，然后我们用这个token去请求七牛服务器；
七牛上传：
七牛官方文档[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