上传图片到阿里云
要根据后台返回的是不是这种形式的数据 以及后台的传参需求。否则可能上传不成功
在components中新建一个组件 upload.vue
upload.vue组件中
<template> <el-upload v-loading="loading" :class="className" :http-request="Upload" action="" :show-file-list="showFileList" :before-upload="beforeUpload" > <slot /> </el-upload> </template> <script> //import { saBs } from '@/utils/request' import axios from 'axios' import { getUploadToken } from '@/api/svrmanage/apply' export default { props: { className: String, imgWidth: String, imgHeight: String, showFileList: { type: Boolean, default: false } }, data() { return { pictureList: [], loading: false } }, watch: { fileList() { // this.pictureList = this.fileList } }, created() { // this.pictureList = this.fileList }, methods: { Upload(file) { const _this = this this.loading = true // 获取Img服务器信息 // 要根据你们后台的返回数据进行拼接 以下是我项目中的 //后台接口getUploadToken() 接口返回数据 图片展示进行 host + '/' + fileName //accessid: "LTAIDQhPlHf4UQLs" //dir: "merchant/gl_24_ads/" //expire: "1586504494" //host: "https://gl365dev.oss-cn-shenzhen.aliyuncs.com" //policy: "eyJleHBpcmF0aW9uIjoiMjAyMC0wNC0xMFQwNzo0MTozNC41MjVaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJtZXJjaGFudC9nbF8yNF9hZHMvIl1dfQ==" //signature: "UdJ1I2ZsnvgNq9KcOszAUg69xE0=" getUploadToken().then(res => { // const Data = JSON.stringify(res.opd) // localStorage.setItem('imgData', Data) const data = res.opd const date = new Date() var request = new FormData() const host = data.host // append相当于打开阿里云通道 这个相当于是你要上传时的通道数据 const fileName = data.dir + data.expire + '.png' request.append('OSSAccessKeyId', data.accessid)// Bucket 拥有者的Access Key Id。 request.append('policy', data.policy)// policy规定了请求的表单域的合法性 request.append('Signature', data.signature)// 根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性 request.append('key', fileName)// 文件名字,可设置路径 request.append('success_action_status', '200')// 让服务端返回200,不然,默认会返回204 request.append('file', file.file)// 需要上传的文件 file axios({ method: 'post', url: data.host, data: request }).then(res => { return res.data }).then(rst => { _this.loading = false _this.$emit('handle-success', host + '/' +fileName) _this.$emit('on-preview', host + '/' +fileName) }).catch(() => { _this.loading = false }) }).catch(res => { console.log('res>>>>>>>', res) }) }, beforeUpload(file) { const _this = this var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const img = new Image() img.src = file const extension = testmsg.toLocaleLowerCase() === 'jpg' const extension2 = testmsg.toLocaleLowerCase() === 'png' const extension3 = testmsg.toLocaleLowerCase() === 'gif' let isSize const isLt2M = file.size / 1024 / 1024 < 10 if (this.imgWidth && this.imgHeight) { isSize = new Promise(function(resolve, reject) { const _URL = window.URL || window.webkitURL const img = new Image() img.onload = function() { const valid = img.width == _this.imgWidth && img.height == _this.imgHeight valid ? resolve() : reject() } img.src = _URL.createObjectURL(file) }).then(() => { return file }, () => { this.$message.error(`上传的图片必须是等于${_this.imgWidth} * ${_this.imgHeight}!`) return Promise.reject() }) } if (!extension && !extension2) { this.$message({ message: '上传文件只能是 jpg、png、gif格式!', type: 'warning' }) } if (!isLt2M) { this.$message({ message: '上传文件大小不能超过 10MB!', type: 'warning' }) } return (extension || extension2 || extension3) && isLt2M && isSize } } } </script> <style> </style>
然后引用组件进行使用
index.vue 上传图片
<template> <div class="app-container svrmanage"> <upload class-name="avatar-uploader" @handle-success="handleAvatarSuccess"> <img v-if="applyUrl" :src="applyUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </upload> <div slot="footer"> <el-button @click="SubmitFlowwater">提交申请</el-button> </div> </div> </template> <script> import Upload from '@/components/upload' export default { components: { Upload }, data() { return { applyUrl: '', }; }, created() {}, methods: { handleAvatarSuccess(file) { this.applyUrl = file }, // 修改流水等级 SubmitFlowwater() { // 请求接口 this.applyUrl 就是传给后台的url参数 } } }; </script>