文章目录
- 1，拷贝文件到前端工程
- 2，局部修改
- 3，在品牌编辑界面使用上传组件
- 4，OSS配置允许跨域
- 5，测试
- multiUpload.vue完整代码
- singleUpload.vue完整代码
- policy.js代码
在Web应用开发中，文件上传是一项非常常见的功能。
这一节详细介绍如何在Vue项目中集成阿里云OSS前端文件上传组件，包括单文件上传和多文件上传功能，并确保跨域请求正常工作。
1，拷贝文件到前端工程
拷贝三个文件到后台管理系统的前端工程：
- multiUpload.vue
- policy.js
- singleUpload.vue
将这三个文件拷贝到项目的components/upload目录下。
2，局部修改
接下来，我们需要对multiUpload.vue和singleUpload.vue进行一些局部修改，主要是更改Bucket的域名。
如下图，域名从阿里云对象存储控制台获取。
完成这些步骤后，我们的上传组件就可以指向正确的Bucket了。这些修改对于确保上传组件能够正确地与阿里云OSS交互至关重要。
3，在品牌编辑界面使用上传组件
第一步，brand-add-or-update.vue组件中，import引入SingleUpload组件。
import SingleUpload from '@/components/upload/singleUpload.vue';
第二步，在当前Vue组件中注册SingleUpload组件。
export default {
components:{
SingleUpload
},
第三步，在当前组件的模板中使用SingleUpload组件。
<el-form-item label="品牌logo地址" prop="logo">
<SingleUpload v-model="dataForm.logo"></SingleUpload>
</el-form-item>
4，OSS配置允许跨域
前端上传文件到Oss，一定是跨域请求，所以需要在阿里云控制配置允许跨域。
- 登录阿里云OSS控制台，选择相应的Bucket。
- 在Bucket详情页面中，选择“跨域配置”。
- 添加一条CORS规则，允许前端项目的域名发起跨域请求。
5，测试
点击上传测试上传功能，上传成功后前端会回显图片缩略图。
- 在品牌编辑界面中，点击上传按钮测试上传功能。
- 成功上传后，前端会显示上传文件的缩略图。
查看阿里云Oss控制台文件列表。
这一节介绍了如何在Vue项目中集成阿里云OSS前端文件上传组件的过程。
通过这些步骤，我们可以确保文件能够安全稳定地上传到云端，并且能够在前端页面上正确展示。
multiUpload.vue完整代码
此Vue组件用于实现多文件批量上传功能。它允许用户同时选择多个文件，并处理上传过程中的各种事件，如进度更新和完成通知。该组件还负责展示文件列表和上传状态。
<template>
<div>
<el-upload
action="http://gulimallfuck2.oss-cn-hangzhou.aliyuncs.com"
:data="dataObj"
:list-type="listType"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview"
:limit="maxCount"
:on-exceed="handleExceed"
:show-file-list="showFile"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from '@/utils'
export default {
name: "multiUpload",
props: {
//图片属性数组
value: Array,
//最大上传图片数量
maxCount: {
type: Number,
default: 30
},
listType:{
type: String,
default: "picture-card"
},
showFile:{
type: Boolean,
default: true
}
},
data() {
return {
dataObj: {
policy: "",
signature: "",
key: "",
ossaccessKeyId: "",
dir: "",
host: "",
uuid: ""
},
dialogVisible: false,
dialogImageUrl: null
};
},
computed: {
fileList() {
let fileList = [];
for (let i = 0; i < this.value.length; i++) {
fileList.push({ url: this.value[i] });
}
return fileList;
}
},
mounted() {},
methods: {
emitInput(fileList) {
let value = [];
for (let i = 0; i < fileList.length; i++) {
value.push(fileList[i].url);
}
this.$emit("input", value);
},
handleRemove(file, fileList) {
this.emitInput(fileList);
},
handlePreview(file) {
this.dialogVisible = true;
this.dialogImageUrl = file.url;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy()
.then(response => {
console.log("这是什么${filename}");
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir +getUUID()+"_${filename}";
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true);
})
.catch(err => {
console.log("出错了...",err)
reject(false);
});
});
},
handleUploadSuccess(res, file) {
this.fileList.push({
name: file.name,
// url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
});
this.emitInput(this.fileList);
},
handleExceed(files, fileList) {
this.$message({
message: "最多只能上传" + this.maxCount + "张图片",
type: "warning",
duration: 1000
});
}
}
};
</script>
<style>
</style>
singleUpload.vue完整代码
这是一个简单的Vue组件，用于处理单个文件的上传任务。它提供了文件选择界面、上传按钮以及上传状态的指示器，便于用户跟踪上传进度和结果。
<template>
<div>
<el-upload
action="http://gulimallfuck2.oss-cn-hangzhou.aliyuncs.com"
:data="dataObj"
list-type="picture"
:multiple="false" :show-file-list="showFileList"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="fileList[0].url" alt="">
</el-dialog>
</div>
</template>
<script>
import {policy} from './policy'
import { getUUID } from '@/utils'
export default {
name: 'singleUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf("/") + 1);
} else {
return null;
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function () {
return this.value !== null && this.value !== ''&& this.value!==undefined;
},
set: function (newValue) {
}
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: '',
// callback:'',
},
dialogVisible: false
};
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('');
},
handlePreview(file) {
this.dialogVisible = true;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy().then(response => {
console.log("响应的数据",response);
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir +getUUID()+'_${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
console.log("响应的数据222。。。",_self.dataObj);
resolve(true)
}).catch(err => {
reject(false)
})
})
},
handleUploadSuccess(res, file) {
console.log("上传成功...")
this.showFileList = true;
this.fileList.pop();
this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
this.emitInput(this.fileList[0].url);
}
}
}
</script>
<style>
</style>
policy.js代码
这个JavaScript文件定义了一个函数，用于生成安全上传策略。它通常包含服务器端所需的验证信息，比如有效期和权限限制，确保只有合法请求才能上传文件。
import http from '@/utils/httpRequest.js'
export function policy() {
return new Promise((resolve,reject)=>{
http({
url: http.adornUrl("/thirdparty/oss/policy"),
method: "get",
params: http.adornParams({})
}).then(({ data }) => {
resolve(data);
})
});
}```
