使用阿里云OSS 实现图片上传 -- 删除
安装ali-oss插件
1.安装 oss 依赖包
npm install ali-oss --save
新建oss.js
2.新建 oss.js
// 引入ali-oss
let OSS = require('ali-oss')
/**
阿里云配置
* [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
* [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
* [bucket] {String}:通过控制台或PutBucket创建的bucket。
* [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
*/
export function client() { return new OSS({
region: '',
accessKeyId: '',
accessKeySecret: '',
bucket: ''
})
}
/**
* 生成随机文件名称
* 规则八位随机字符,加下划线连接时间戳
*/
export const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return `${+new Date()}_${rx()}${rx()}`
}
使用el-upload
3.在页面中使用el-upload组件
<el-form-item label="视频/图片上传" prop="Video">
<el-upload action :http-request="Upload" :on-preview="handlePreview" :before-remove="beforeRemove" :on-remove="handleRemove"
:on-success="handleSuccess" :on-exceed="handleExceed" drag :limit="limit" :file-list="fileList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
</el-upload>
<el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
</el-form-item>
在需要的地方引入oss.js
4.在script标签中引入刚才新建的oss.js文件
import {client,getFileNameUUID} from "../stroe/oss"; //client,getFileNameUUID是前面的oss.js文件内的两个封装函数
export default {
name: "Upload",
props: {
limit: {
type: Number,
default: 1
}
},
data(){
return {
fileList: [], //文件列
showProgress: false, //进度条的显示
dataObj: {}, //存签名信息
progress: 0 //进度条数据
}
}
}
在el组件
el-upload中需要这个特别重要,图片回显
Upload(file) {
const that = this;
async function multipartUpload() {
let temporary = file.file.name.lastIndexOf(".");
let fileNameLength = file.file.name.length;
let fileFormat = file.file.name.substring(
temporary + 1,
fileNameLength
);
let fileName = getFileNameUUID() + "." + fileFormat;
client(that.dataObj)
.multipartUpload(`image/${fileName}`, file.file,
//这个的话看情况有域名了,就不需要加,
{
headers: {
"Content-Type": "img/jpg",
},
)
.then(result => {
//上传成功返回值,可针对项目需求写其他逻辑
console.log(result);
})
.catch(err => {
console.log("err:", err);
});
}
multipartUpload();
}
设置跨域
在oss里面根据需要设置
读写权限为私有的话,还有就是有需要设置权限的
删除
try {
let result = await client().delete(`${不要全路径}`);
console.log("0-0", result);
} catch (e) {
console.log("0-1", e);
}