vue 使用OSS上傳圖片或附件講解
vue項目中使用OSS上傳圖片或附件
上傳圖片和附件這裡不做區別;上傳的流程都一樣;
1、新建oss.js文件,封裝使用oss (需要安裝包ali-oss)
const OSS = require('ali-oss') const OSSConfig = { uploadHost: 'http://xxxxx.oss-cn-shenzhen.aliyuncs.com', //OSS上傳地址 ossParams: { region: 'oss-cn-shenzhen', success_action_status: '200', // 默認200 accessKeyId: 'LTxxxxxxxxxxxxxxxvnkD', accessKeySecret: 'J6xxxxxxxxxxxxxxxxiuv', bucket: 'xxxxxxxx-czx', }, } function random_string(len) { len = len || 32 var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' var maxPos = chars.length var pwd = '' for (let i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)) } return pwd } function uploadOSS(file) { return new Promise(async (resolve, reject) => { const fileName = `${random_string(6)}_${file.name}` let client = new OSS({ region: OSSConfig.ossParams.region, accessKeyId: OSSConfig.ossParams.accessKeyId, accessKeySecret: OSSConfig.ossParams.accessKeySecret, bucket: OSSConfig.ossParams.bucket, }) const res = await client.multipartUpload(fileName, file) // resolve(res) // 或者返回如下: resolve({ fileUrl: `${OSSConfig.uploadHost}/${fileName}`, fileName: file.name }) }) } export { uploadOSS }
2、頁面中使用oss.js
這裡是對elementUI的上傳組件二次封裝,裡面不使用組件的action上傳圖片和附件,使用oss上傳方式;
<template> <div class="upload-file"> <el-upload ref="fileUpload" action="" :headers="uploadProps.headers" list-type="picture-card" :show-file-list="false" :http-request="fnUploadRequest" :on-success="handleSuccess" :on-error="handleError" :before-upload="handleUpload" > <slot></slot> </el-upload> </div> </template> <script> import { getAccessToken, getRefreshToken, getAccessTokenTTL } from "@/utils/auth"; import { uploadOSS } from '@/utils/oss'; export default { name: "index", data() { return {}; }, computed: { userAccountID() { return this.$store.state.user.userAccountID; }, uploadProps() { return { // action: `${process.env.VUE_APP_BASE_API}/api/file/upload`, headers: { // 接口可能要帶token: "", Authorization: getAccessToken(), }, data: {}, }; }, }, methods: { handleExceed(file, fileList){ // console.log(file, fileList); this.$message.error('上傳失敗,限制上傳數量10個文件以內!'); }, handleUpload(file, fileList){ // console.log(file, fileList); var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'docx' || testmsg === 'doc' || testmsg === 'pdf' || testmsg === 'zip' || testmsg === 'rar' || testmsg === 'ppt' || testmsg === 'txt' const isLimit10M = file.size / 1024 / 1024 < 10 var bool = false; if(extension && isLimit10M){ bool = true; } else { bool = false; } if(!extension) { this.$message.error('請選擇附件文件類型!'); return bool; } if(!isLimit10M) { this.$message.error('上傳失敗,不能超過10M!'); return bool; } return bool; }, handleSuccess(res) { // console.log(res); if (res) { this.$emit('fileData', res) this.$message.success("上傳附件成功!"); } }, handleError(err){ this.$message.error('上傳附件失敗!'); }, // 上傳圖片 async fnUploadRequest(options) { try { // console.log(options); let file = options.file; // 拿到 file let res = await uploadOSS(file) console.log(res); // 返回數據 this.$emit("fileData", res); this.$message.success("上傳附件成功!"); } catch (e) { this.$message.error('上傳附件失敗!'); } }, }, }; </script> <style lang="scss" scoped> ::v-deep .el-upload, .el-upload--picture-card { // width: 50px; height: 0px; border: none; line-height: 0; display: block; background: #f5f6fb; } .el-upload { width: 50px; } .img-cont { width: 50px; height: 24px; background: #f5f6fb; .img-icon { color: #ccc; } .img-text { font-size: 12px; height: 24px; color: #000; } } </style>
使用封裝的上傳組件
<div class="task-detail pr"> <el-form-item label="報備原因" prop="taskDesc" required> <div class="flex-center upload-position"> <ImgUpload @imgData="imgData" /> <FileUpload class="ml10" @fileData="fileData" /> </div> <el-input type="textarea" v-model="ruleForm.taskDesc" placeholder="請輸入報備原因" maxlength="200" @input="checkiptTaskDesc()" ></el-input> <div class="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div> <div class="img-list mt10 flex"> <ImgZoomIn :imagesList="imagesList" @deleteImg="deleteImg"></ImgZoomIn> </div> <div class="dotted-line" v-if="imagesList.length > 0 && filesList.length > 0"></div> <div class="file-item"> <HandleFile :filesList="filesList" @deleteFile="deleteFile"></HandleFile> </div> </el-form-item> </div>
效果如下
到此這篇關於vue 使用OSS上傳圖片或附件講解的文章就介紹到這瞭,更多相關vue 使用OSS上傳圖片或附件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解Vue ElementUI手動上傳excel文件到服務器
- element el-upload文件上傳覆蓋第一個文件的實現
- vue使用element實現上傳圖片和修改圖片功能
- 解決el-upload批量上傳隻執行一次成功回調on-success的問題
- antd+react中upload手動上傳單限制上傳一張