如果带宽不行,上传一个文件需要很长时间,导致用户体验太差,解决这个问题是将文件上传到阿里云或者腾讯云上,拿到URL,这样做速度快。在Vue项目中快速注册使用腾讯云,并将数据上传到云端服务器。
1. 点击控制台
2. 对象存储
3. 创建储存桶
4. 输入相关信息—公有读私有写
5. 下一步
6. 检查信息 创建
7. 在API管理里新建密钥—SecretId和SecretKey
console.cloud.tencent.com/cam/capi
8. 跨域访问CORS设置 添加规则
9. 点击保存
10. 在文档—JS SDK中查看快速使用
cloud.tencent.com/document/pr…
11. webpack输入
控制台输入:npm i cos-js-sdk-v5 --save
12. 上传图片
<template>
<div>
<input type="file" accept="image/jpeg,image/jpg,image/png,image/gif" @change="upload">
<img :src="src" alt="">
</div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
SecretId: '',
SecretKey: '',
})
export default {
props: {},
data() {
return {
src:'',
};
},
methods: {
async upload(e){
console.dir(e.target.files[0])
const res=await cos.uploadFile({
Bucket: '', /* 填写自己的 bucket,必须字段 */
Region: '', /* 存储桶所在地域,必须字段 */
Key: Date.now() + e.target.files[0].name, /* 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段 */
Body: e.target.files[0], // 上传文件对象
SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值,超过5MB 使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */
});
console.log(res)
this.src='https://' + res.Location
},
}
};
</script>
<style scoped>
</style>
Bucket和Region见下图
13. 查看已上传的文件