3.上传图片(阿里云空间,oss验证)

 笔记

20240710   未验证,现在还没有阿里云空间,等买个sit环境就可以验证一下。

 前端

        页面
<!--页面-->
<el-form-item label="优惠券图片" prop="couponImg"><single-upload v-model="dataForm.couponImg"></single-upload>
</el-form-item><!--vue引入-->
import SingleUpload from "@/components/upload/singleUpload";<!--vue对象里加组件-->
components: { SingleUpload },<!--保存方法,couponImg就是url路径-->
        组件
<template> <div><!-- action必选参数,上传地址,bucket的外网访问域名 --><el-uploadaction="https://vivi-gulimall.oss-cn-hangzhou.aliyuncs.com":data="dataObj"list-type="picture":multiple="false" :show-file-list="showFileList":file-list="fileList":before-upload="beforeUpload":on-remove="handleRemove":on-success="handleUploadSuccess":on-preview="handlePreview"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过10MB</div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="fileList[0].url" alt=""></el-dialog></div>
</template>
<script>import {policy} from './policy'import { getUUID } from '@/utils'export 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/869563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【R语言+Gephi】利用R语言和Gephi实现共发生网络的可视化

【R语言Gephi】利用R语言和Gephi实现共发生网络的可视化 注&#xff1a;本文仅作为自己的学习记录以备以后复习查阅 一 概述 Gephi是一款开源免费的多平台网络分析软件&#xff0c;在Windows、Linux和Mac os上均可以运行&#xff0c;像他们官网所说的&#xff0c;他们致力于…

【深度学习】Pytorch完成线性回归!

&#x1f34a;嗨&#xff0c;大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; )&#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官、CSDN人工智能领域优质创作者 。 易编橙&#xff1a;一个帮助编程小…

提升困难生学工支持:智慧校园的新功能介绍

智慧校园的学工管理系统内嵌的困难生信息管理功能&#xff0c;是一个综合性的服务平台&#xff0c;专注于精准识别校园内的经济困难学生&#xff0c;并给予他们必要的帮助与关怀&#xff0c;确保每位学生都能在公平的环境中追求学业和个人成长。这一功能通过一系列信息化手段&a…

标准立项 | 深度脱氨生物填料选型指南

编制单位&#xff1a;北京科净源科技股份有限公司、中国地质大学(北京)、中华环保联合会水环境治理专业委员会、清华大学、北京师范大学、中国环境科学研究院、清华大学、天津高端装备研究院、中车环境科技有限公司、云南滇池水务股份有限公司等。

职升网:考取专科学历的途径包括以下这些!

高考统招&#xff1a; 每年6月举行的全国统一高考&#xff0c;是获得专科学历的传统途径。 考生需参加由教育部组织的统一考试&#xff0c;按照分数由高到低依次录取。 适合高中毕业生或具有同等学历的学生。 自学考试&#xff1a; 又称自考&#xff0c;是一种没有入学考试…

C/C++ list模拟

模拟准备 避免和库冲突&#xff0c;自己定义一个命名空间 namespace yx {template<class T>struct ListNode{ListNode<T>* _next;ListNode<T>* _prev;T _data;};template<class T>class list{typedef ListNode<T> Node;public:private:Node* _…

ArcGIS的智慧与情怀

初识ArcGIS 在这个信息化的时代&#xff0c;ArcGIS如同一位智者&#xff0c;静静地伫立在地理信息系统的巅峰。初识它时&#xff0c;我仿佛走进了一片未知的领域&#xff0c;心中充满了好奇与期待。ArcGIS&#xff0c;这款专业的地理信息系统软件&#xff0c;凭借其强大的功能…

小米恢复联系人,跟着这2个步骤,让你的社交重回巅峰

当你突然发现小米手机里的联系人列表变得空空如也&#xff0c;是不是感觉就像失去了与外界沟通的“秘密武器”&#xff1f;别担心&#xff0c;这并不意味着你真的失去了他们。他们可能只是藏在了手机里的某个神秘角落&#xff0c;等待着你的召唤。接下来&#xff0c;小编将会介…

瓦罗兰特游戏帧数低怎么办 瓦罗兰特游戏帧率提不上去怎么解决

瓦罗兰特是一款由拳头游戏&#xff08;Riot Games&#xff09;开发的5v5英雄射击游戏。结合了MOBA元素&#xff0c;每个角色都拥有四个独特的技能&#xff1b;提供了多种游戏模式&#xff0c;如5V5战术射击等&#xff1b;角色和皮肤设计丰富。游戏中&#xff0c;玩家将扮演各具…

【好书推荐】Midjourney:半途而废?还是一路坦途?

去年 AI 爆火的时候&#xff0c;也赶时髦用上了 Midjourney。平时用它生成图片&#xff0c;感觉生成的图片好看&#xff0c;比上网四处找图更省时省事&#xff0c;更合心意&#xff0c;还不用担心版权问题。 给大家看一下我随便用 Midjourney 画的神兽图。 有一次&#xff0c…

C++相关概念和易错语法(17)(适配器模式、仿函数)

1.stack和queue stack和queue的相关接口如下&#xff1a; stack queue 我们发现不管是stack还是queue&#xff0c;它们都有push和pop&#xff0c;不区分push_back和push_front&#xff0c;这是由它们的入栈特定顺序特性决定的&#xff0c;并且它们都没有迭代器&#xff0c;st…

Java继承练习(2) (2024.7.9)

手机类 package Phone20240709;public class Phone {private String brand;private String price;private static int size;public Phone() {}public Phone(String brand, String price) {this.brand brand;this.price price;}public String getBrand() {return brand;}publ…

【独家揭秘】视频号矩阵系统源码,智能多平台管理,发布效率飙升的秘密武器!

在如今这个信息爆炸的时代&#xff0c;视频内容已经成为人们获取信息和娱乐的重要方式。然而&#xff0c;对于众多内容创作者和企业来说&#xff0c;如何高效地将视频内容发布到各大平台&#xff0c;提升品牌曝光度和用户互动&#xff0c;一直是一个头疼的问题。今天&#xff0…

京东商品历史价格查询

当前资料来源于网络&#xff0c;禁止用于商用&#xff0c;仅限于学习。 下载京东APP 登录后 打开商品详情就可以看到 要获取京东商品的历史价格&#xff0c;你可以在京东网站上搜索该商品&#xff0c;并进入该商品的详情页面。然后&#xff0c;在页面中找到“商品详情”一栏&…

Oracle基础以及一些‘方言’(二)

1、Oracle的查询语法结构 Oracle 的单表查询的语法结构&#xff1a; SELECT 1 FROM 2 WHERE 3 GROUP BY 4 HAVING 5 ORDER BY 6 其每个关键词的功能与MySQL中的功能已知&#xff0c;不过分页查询的关键词 limit 并不在Oracle的语法结构中。伪列&#xff1a; 在 Oracle 的表的使…

羊大师:暑期不“胖”秘籍:羊奶滋养,细嚼慢咽是关键!

夏日炎炎&#xff0c;假期悠长&#xff0c;如何在享受悠闲时光的同时&#xff0c;保持轻盈体态&#xff0c;成了许多人心中的小秘密。今天&#xff0c;就让我们一起揭秘暑期不“胖”的秘籍&#xff0c;让羊奶的滋养与细嚼慢咽的智慧&#xff0c;成为你美丽夏日的守护神。 羊奶轻…

HTMLtable表转C#DataTable

在C#中&#xff0c;将HTML表格转换成DataTable对象是一个常见的需求&#xff0c;尤其是在处理网页数据或导入HTML格式数据时。 使用了HtmlAgilityPack库来解析HTML&#xff0c;并利用System.Data来创建DataTable。 首先&#xff0c;确保已经安装了HtmlAgilityPack。如果没有安…

4.2 存储管理

大纲 页式存储必考&#xff0c;段式存储看运气 页式存储 概念

100+大屏模板,基于Vue 国产开源 IoT 物联网 Web 组态可视化 BI 数据分析工具

项目源码&#xff0c;文末联系小编 01 DataEase 可视化大屏 DataEase 是一个国产开源的数据可视化分析工具(BI工具)&#xff0c;旨在帮助用户快速分析数据并洞察业务趋势&#xff0c;以实现业务的改进与优化。它支持丰富的数据源连接&#xff0c;包括OLTP和OLAP数据库、数据仓库…

Spark RDD优化

Spark RDD优化 一、分区优化二、持久化优化三、依赖优化四、共享变量优化五、提交模式与运行模式优化六、其他优化 一、分区优化 分区数调整&#xff1a;RDD的分区数可以通过repartition和coalesce方法进行调整。合理的分区数可以提高并行度&#xff0c;但过多的分区会增加管…