uni-app 上传本地图片到七牛云
时间: 2023-08-03 11:04:09 浏览: 123
微信小程序调用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];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const base64Img = reader.result;
qiniuUploader.upload(base64Img, (res) => {
console.log(res);
}, (error) => {
console.log(error);
});
};
},
},
};
</script>
```
其中,首先使用FileReader将本地图片转换为base64格式,然后调用qiniuUploader.upload函数上传图片。
以上就是在uni-app中上传本地图片到七牛云的基本步骤,具体使用细节可以根据实际情况进行调整。
阅读全文