用iis做网站,常州公司网站建设,宝安中心站,网站开发 商标注册文章目录 1#xff0c;拷贝文件到前端工程2#xff0c;局部修改3#xff0c;在品牌编辑界面使用上传组件4#xff0c;OSS配置允许跨域5#xff0c;测试multiUpload.vue完整代码singleUpload.vue完整代码policy.js代码 在Web应用开发中#xff0c;文件上传是一项非常常见的… 文章目录 1拷贝文件到前端工程2局部修改3在品牌编辑界面使用上传组件4OSS配置允许跨域5测试multiUpload.vue完整代码singleUpload.vue完整代码policy.js代码 在Web应用开发中文件上传是一项非常常见的功能。
这一节详细介绍如何在Vue项目中集成阿里云OSS前端文件上传组件包括单文件上传和多文件上传功能并确保跨域请求正常工作。
1拷贝文件到前端工程
拷贝三个文件到后台管理系统的前端工程
multiUpload.vuepolicy.jssingleUpload.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地址 proplogoSingleUpload v-modeldataForm.logo/SingleUpload/el-form-item4OSS配置允许跨域
前端上传文件到Oss一定是跨域请求所以需要在阿里云控制配置允许跨域。
登录阿里云OSS控制台选择相应的Bucket。在Bucket详情页面中选择“跨域配置”。添加一条CORS规则允许前端项目的域名发起跨域请求。
5测试
点击上传测试上传功能上传成功后前端会回显图片缩略图。
在品牌编辑界面中点击上传按钮测试上传功能。成功上传后前端会显示上传文件的缩略图。 查看阿里云Oss控制台文件列表。 这一节介绍了如何在Vue项目中集成阿里云OSS前端文件上传组件的过程。
通过这些步骤我们可以确保文件能够安全稳定地上传到云端并且能够在前端页面上正确展示。
multiUpload.vue完整代码
此Vue组件用于实现多文件批量上传功能。它允许用户同时选择多个文件并处理上传过程中的各种事件如进度更新和完成通知。该组件还负责展示文件列表和上传状态。
templatedivel-uploadactionhttp://gulimallfuck2.oss-cn-hangzhou.aliyuncs.com:datadataObj:list-typelistType:file-listfileList:before-uploadbeforeUpload:on-removehandleRemove:on-successhandleUploadSuccess:on-previewhandlePreview:limitmaxCount:on-exceedhandleExceed:show-file-listshowFilei classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcdialogImageUrl 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 divel-uploadactionhttp://gulimallfuck2.oss-cn-hangzhou.aliyuncs.com:datadataObjlist-typepicture:multiplefalse :show-file-listshowFileList:file-listfileList:before-uploadbeforeUpload:on-removehandleRemove:on-successhandleUploadSuccess:on-previewhandlePreviewel-button sizesmall typeprimary点击上传/el-buttondiv slottip classel-upload__tip只能上传jpg/png文件且不超过10MB/div/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcfileList[0].url alt/el-dialog/div
/template
scriptimport {policy} from ./policyimport { getUUID } from /utilsexport 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);})});
}
