How to use OSS to upload pictures or attachments in vue project

This article mainly introduces the vue project how to use OSS to upload pictures or attachments, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Use OSS to upload pictures or attachments in vue projects

There is no difference between uploading pictures and attachments here; the upload process is the same.

1. Create a new oss.js file Encapsulation uses oss (need to install package ali-oss) const OSS = require ('ali-oss') const OSSConfig = {uploadHost:' http://xxxxx.oss-cn-shenzhen.aliyuncs.com', / / OSS upload address ossParams: {region: 'oss-cn-shenzhen', success_action_status:' 200 accessKeyId: 'LTxxxxxxxxxxxxxxxvnkD', accessKeySecret:' J6xxxxxxxxxxxxxxiuvqi, 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) / / or return the following: resolve ({fileUrl: `${OSSConfig.uploadHost} / ${fileName}`, fileName: file.name})} export {uploadOSS} 2, use oss.js in the page

Here is the secondary encapsulation of the upload component of elementUI, which does not use the action of the component to upload pictures and attachments, but uses the oss upload method

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: {/ / API may have token: ", Authorization: getAccessToken (),}, data: {},} },}, methods: {handleExceed (file, fileList) {/ / console.log (file, fileList); this.$message.error ('upload failed, limit the number of files to be uploaded!') ;}, 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 ('Please select an attachment file type!') ; return bool;} if (! isLimit10M) {this.$message.error ('upload failed, cannot exceed 10MB') ; return bool;} return bool;}, handleSuccess (res) {/ / console.log (res); if (res) {this.$emit ('fileData', res) this.$message.success ("upload attachment succeeded!") ;}}, handleError (err) {this.$message.error ('upload attachment failed!') ;}, / / upload async fnUploadRequest (options) {try {/ / console.log (options); let file = options.file; / / get file let res = await uploadOSS (file) console.log (res); / / return data this.$emit ("fileData", res); this.$message.success ("upload attachment succeeded!") ;} catch (e) {this.$message.error ('upload attachment failed!') ;},},};:: 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;}}

Use encapsulated upload components

{{checkIptTaskDescLen}} / 200

The effect is as follows

Thank you for reading this article carefully. I hope the article "how to use OSS to upload pictures or attachments in vue project" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!