uni-app 上传图片到七牛云
时间: 2023-08-03 11:03:42 浏览: 314
微信小程序调用uploadFile向七牛云存储上传图片
4星 · 用户满意度95%
要在uni-app中上传图片到七牛云,可以按照以下步骤进行:
1. 在七牛云上创建一个存储空间,并获取该空间的Access Key和Secret Key。
2. 安装uni-app的官方插件uni-upload,并在项目根目录下的vue.config.js中进行配置,添加以下代码:
```
const qiniuUploader = require('uniapp-qiniu-sdk');
const qiniuOptions = {
region: 'your region', // 七牛云存储区域
uptokenURL: 'your uptokenURL', // 服务端提供获取上传凭证的接口
domain: 'your domain', // 七牛云存储空间绑定的域名
};
module.exports = {
configureWebpack: {
plugins: [
{
apply: (compiler) => {
compiler.hooks.afterEmit.tapPromise('afterEmit', (compilation) => {
return new Promise((resolve, reject) => {
qiniuUploader.upload(compilation.assets['your upload file name'].existsAt, 'your key', qiniuOptions, (res) => {
console.log(res);
resolve();
}, (error) => {
console.log(error);
reject();
});
});
});
},
},
],
},
};
```
3. 在需要上传图片的页面中,添加以下代码:
```
<template>
<view>
<input type="file" @change="upload">
</view>
</template>
<script>
export default {
methods: {
upload(event) {
const file = event.target.files[0];
qiniuUploader.upload(file, (res) => {
console.log(res);
}, (error) => {
console.log(error);
});
},
},
};
</script>
```
其中,qiniuUploader.upload函数的第一个参数为要上传的文件,第二个参数为上传成功后的回调函数,第三个参数为上传失败后的回调函数。
以上就是在uni-app中上传图片到七牛云的基本步骤,具体使用细节可以根据实际情况进行调整。
阅读全文