前端上传图片到阿里云转链接
前端上传图片到阿里云转链接
·
文章是参考这一篇http://t.csdn.cn/Xl4J8+自己的想法结合
一:首先要有阿里云账号;
二:当拥有账号后新建Bucket

红框里的选中其他的随便填就可以(每个选项都有解释可以按自己需要选择)。

三:新建后点击这个Bucket的名称进入,在左侧下拉列表中找到“跨域设置”,进行跨域设置。

四:点击创建规则即可创建(我这里创建了post请求方式,PUT,GET如果只需要一种请求方式建一种就可以)

五:此时我们要知道我们的ID和密钥,鼠标浮动右上角个人中心看到“Access Key 管理”点进去,点击“创建Access Key”记住id和密码。然后就可以到程序内写代码了(如果已经有了也可以用现成的或者也可以新建)。
六:程序里:
1):前提:我写的是图片上传转链接,vue2,element-ui
2):oss前期引入
①先安装
npm i ali-oss -D
②然后引入才可以使用
import OSS from 'ali-oss'
③:要初始化一下
//data里声明:
// 图片上传链接
imageUrl: '',
// oss参数
client: null,
//create()里初始化
// oss初始化
this.client = new OSS({
region: 'oss-cn-选择的城市拼音',
accessKeyId: '刚刚复制的ID',
accessKeySecret: '刚刚复制的密钥',
bucket: 'Bucket的名称'
})
④:图片上传
<el-form-item label="商品图片" prop="skuImage">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
⑤:函数
// 上传图片前的函数
beforeAvatarUpload(file) {
// 调oss上传文件
this.put(file.name, file)
// 阻止文件自动上传
return false
},
// oss上传文件方法
async put(name, file) {
try {
var fileName = new Date().getTime() + name
// object-name可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
const result = await this.client.put(fileName, file)
// console.log(result)
this.imageUrl = result.url // 返回的上传图片地址
this.ruleForm.skuImage = this.imageUrl
} catch (e) {
console.log(e)
}
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)