下载依赖 npm install ali-oss
这里用的elementUI 里的upload上传文件功能
<el-form-item label="图片" prop="content" class="editor_box">
<el-upload action="" class="avatar-uploader" :http-request="uploadAvatarTwo"
:before-upload="beforeUpload" :on-success="handleSuccess"
accept=".png,.jpg,.gif,.jepg" :show-file-list="false">
</el-upload>
</el-form-item>
// 图片上传阿里云之前 调用后台接口获取一些上传oss的参数
async beforeUpload(file) {
let that = this
this.uillUpdateImg = true
this.videoFlag = false
await http.get("/photo/fetchStsCredentials", {})
.then(function (res) {
that.accessKeyId = res.data.accessKey;
that.accessKeySecret = res.data.accessKeySecret;
that.securityToken = res.data.securityToken
})
.catch(function (err) {
console.log("连接失败" + err);
});
},
//上传到阿里云oss
uploadAvatarTwo(options) {
let that = this
let client = new OSS({
region: "oss-cn-qingdao",
accessKeyId: that.accessKeyId,
accessKeySecret: that.accessKeySecret,
stsToken: that.securityToken,
bucket: "medai",
});
let file = options.file; // 拿到 file
let fileName = file.name.substr(0, file.name.lastIndexOf('.'))
let date = new Date().getTime()
let fileNames = `${date}_${fileName}`
client.put(fileNames, file,).then(res => {
if (res.res.statusCode === 200) {
console.log(res);
options.onSuccess(res)
} else {
options.onError("上传失败")
}
})
},
//上传成功后回调
handleSuccess(res) {
console.log(res);
// 如果上传成功
if (res) {
} else {
}
// loading动画消失
this.uillUpdateImg = false
},