使用阿里云OSS 实现图片上传 -- 删除

使用阿里云OSS 实现图片上传 -- 删除

• 安装ali-oss插件
• • 新建oss.js
  • 使用el-upload
  • 在需要的地方引入oss.js
  • 在el组件
  • 设置跨域
  • 删除

安装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);
              }