上传图片的方法
1直接后端返回上传图片的服务器地址,使用element的action属性可以直接上传到服务器,之后后端负责上传阿里云
2客户端直传两种方式
客户端签名直传
首先调取接口获取oss配置 包括 accesskeyid accesskeysecret bucket服务器名称 host 服务器地址 之后使用 new oss 并使用multipartUpload 上传你的图片到阿里云 但是这种方法会暴露你的oss服务器的secret 一般不使用
服务端签名直传
这种方法是客户端向服务端发送上传i请求,服务端生成一个policy 你在前端配置policy来进行上传图片
通过axios直接上传到阿里云 (上传表单)
介绍这种方法
首先上传前获取阿里云配置
getOssData() {
this.$fetch.api_home.getOssData()
.then(data=>{
this.accessKeyId= data.accessid; //ak
this.policy = data.policy; //secret
this.region = data.host; // 上传地址
this.dir = data.dir; //上传路径
this.callback = data.callback; //回调函数
this.signature = data.signature; //
})
.catch(err=>{
this.$message.error(err)
})
},
upload组件绑定的事件
<el-upload
class="avatar-uploader"
action
:http-request="uploadAddImg"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.pictureurl" :src="form.pictureurl" class="avatarUpload" style="width: 150px;height: 150px;" @click="getOssData()">
<i v-else class="el-icon-plus avatar-uploader-icon" @click="getOssData()"></i>
</el-upload>
注意绑定的事件http-request 用于自定义上传
官方给的介绍
async uploadAddImg(option) {
// try/catch异常捕获 当try中的报错误的时候,执行catch里面的代码,try下面的代码不再执行
// 通过throw自动抛出的错误不会被catch捕获
try {
//对获取到的oss配置文件进行数据处理
let file = option.file;
let fileName = file.name;
var name = fileName.split(".")[1];
// 获取OSS配置信息
var formData = new FormData();
var timestamp = (new Date()).valueOf();
var result = `${timestamp}.${name}`;
formData.append('key', `${this.dir}${result}`); // 文件名字,可设置路径
formData.append('OSSAccessKeyId', this.accessKeyId); // Bucket 拥有者的Access Key Id
formData.append('policy', this.policy); // policy规定了请求的表单域的合法性
// 根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
formData.append('signature', this.signature); //签名
formData.append('success_action_status', 201); // 成功时让服务端返回200,不然,默认会返回204
formData.append('file', file); // 需要上传的文件filer
formData.append('callback', this.callback);
axios.post(this.region, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then((res) => {
if (res.status === 201){
let url = this.region + "/" + this.dir + result;
// let arr = url.split("/");
//获取到在线地址后,将图片名称赋给form。地址一份给form一份给imageUrl1.
this.form.pictureurl = url;
}
})
.catch((err) => {
this.$message.error("请求错误")
});
} catch (error) {
this.$message.error("try报错");
option.onError("上传失败");
}
},