托管型网站,张雪峰谈物联网工程专业,好的建筑设计公司,青岛做网站方案笔记 20240710 未验证#xff0c;现在还没有阿里云空间#xff0c;等买个sit环境就可以验证一下。 前端 页面
!--页面--
el-form-item label优惠券图片 propcouponImgsingle-upload v-modeldataForm.couponImg现在还没有阿里云空间等买个sit环境就可以验证一下。 前端 页面
!--页面--
el-form-item label优惠券图片 propcouponImgsingle-upload v-modeldataForm.couponImg/single-upload
/el-form-item!--vue引入--
import SingleUpload from /components/upload/singleUpload;!--vue对象里加组件--
components: { SingleUpload },!--保存方法couponImg就是url路径-- 组件
template div!-- action必选参数上传地址bucket的外网访问域名 --el-uploadactionhttps://vivi-gulimall.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 {_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(上传前请求服务端签名得到结果, _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
