坑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/pingmian/44962.shtml

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

相关文章

2493-04A-6 同轴连接器

型号简介 2493-04A-6是Southwest Microwave的连接器。该连接器是一种端子连接器&#xff0c;采用 1.0 毫米插头&#xff08;公头&#xff09;进行连接。它由多个部件组成&#xff0c;包括过渡块、接地板、螺纹夹紧板、发射针、冷板、底座、电路板和外壳等。 型号特点 外壳&…

【数据结构】深入理解哈希及其底层数据结构

目录 一、unordered系列关联式容器 二、底层结构 2.1 哈希的概念 2.2 哈希冲突&#xff08;哈希碰撞&#xff09; 2.3 哈希函数 2.4 哈希冲突处理 2.4.1 闭散列&#xff08;开放定址法&#xff09; 2.4.1.1 代码实现&#xff1a; 2.4.2 开散列&#xff08;链地址法&…

Visual Studio 2022 安装及使用

一、下载及安装 VS 官网&#xff1a;Visual Studio: IDE and Code Editor for Software Developers and Teams 下载免费的社区版 得到一个.exe文件 右键安装 选择C开发&#xff0c;并修改安装位置 等待安装 点击启动 二、VS的使用 1.创建项目 打开VS&#xff0c;点击创建新项…

Python爬虫教程第6篇-使用session发起请求

为什么要使用session 前面介绍了如何使用reqesuts发起请求&#xff0c;今天介绍如何使用session发起请求。session简单理解就是一种会话机制&#xff0c;在浏览器中我们登录完之后&#xff0c;后面再请求服务数据都不需要再登录了&#xff0c;以为Cookie里已经保存了你的会话状…

【Cesium开发实战】火灾疏散功能的实现,可设置火源点、疏散路径、疏散人数

Cesium有很多很强大的功能&#xff0c;可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义的火灾疏散人群的功能。 1.话不多说&#xff0c;先展示 火灾疏散模拟 2.设计思路 根据项目需求要求&#xff0c;可设置火源点、绘制逃生路线、可设置逃生人数。所以点击火…

荷兰花海元宇宙的探索

在数字科技日新月异的今天&#xff0c;我们有幸见证了一个全新的概念——元宇宙的诞生。元宇宙是一个虚拟世界&#xff0c;它通过高科技手段&#xff0c;将现实世界的各种元素和场景数字化&#xff0c;使人们能够在虚拟世界中体验现实世界的生活。而在这个虚拟世界中&#xff0…

java设计模式(十六)职责链模式(Chain of Responsibility Pattern)

1、模式介绍&#xff1a; 职责链模式是一种行为设计模式&#xff0c;其中多个对象按顺序处理请求&#xff0c;直到其中一个对象能够处理请求为止。请求沿着链传递&#xff0c;直到有一个对象处理它为止。 2、应用场景&#xff1a; 职责链模式适用于以下场景&#xff1a;请求…

初学51单片机之UART串口通信

CSDN其他博主的博文&#xff08;自用&#xff09;嵌入式学习笔记9-51单片机UART串口通信_51uart串口通讯-CSDN博客 CSDN其他博主的博文写的蛮好&#xff0c;如果你想了解51单片机UART串口可以点进去看看&#xff1a; UART全称Universal Asynchronous Receiver/Transmitter即通…

常用知识碎片 分页组件的使用(arco-design组件库)

目录 分页组件使用 API 组件代码示例 使用思路&#xff1a; 前端示例代码 html script 后端示例代码 Controller Impl xml 总结 分页组件使用 使用Arco Design之前需要配置好搭建前端环境可以看我另外一篇文章&#xff1a; 手把手教你 创建Vue项目并引入Arco Desi…

生存人数00

题目链接 生存人数 题目描述 注意点 假设所有人都出生于 1900 年至 2000 年&#xff08;含 1900 和 2000 &#xff09;之间birth[i] < death[i]如果有多个年份生存人数相同且均为最大值&#xff0c;输出其中最小的年份 解答思路 初始想到的是遍历birth&#xff0c;更新…

正则表达式语法

普通字符&#xff1a; 匹配 "a" 将匹配文本中的 "a" 字符: 示例: a 匹配 "a" 元字符&#xff1a; \d 匹配 任意数字字符 等价于 [0-9] : 示例: \d 匹配 "1" \D 匹配一个非数字字符 等价于 [^0-9] \w 匹配 任意字母数字字符: 示例:…

B2B领域的客户裂变策略:打造行业内的共赢生态

在日益竞争激烈的B2B市场中&#xff0c;客户裂变作为一种高效的增长策略&#xff0c;不仅能够帮助企业快速扩大客户基础&#xff0c;还能促进行业内资源共享与合作&#xff0c;共同构建一个健康、可持续的共赢生态。本文将探讨B2B领域实施客户裂变策略的关键要素&#xff0c;以…

极狐GitLab 17.0 重磅发布,100+ DevSecOps功能更新来啦~【十】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

无障碍全免费上手智能体:Autogen Studio结合Deepseek Coder打造一款AI旅游规划师

本文的唯一目的是通过打造一款AI旅游规划师&#xff0c;通俗易懂、深入浅出的讲清楚AI应用的大方向-智能体-的原理。 无需科学上网&#xff0c;无需付费API&#xff0c;无需编程能力&#xff0c;一小时即可部署、搭建一款复杂的、多代理交互的AI智能体-旅游规划师&#xff0c;…

【深度学习】PyTorch深度学习笔记02-线性模型

1. 监督学习 2. 数据集的划分 3. 平均平方误差MSE 4. 线性模型Linear Model - y x * w 用穷举法确定线性模型的参数 import numpy as np import matplotlib.pyplot as pltx_data [1.0, 2.0, 3.0] y_data [2.0, 4.0, 6.0]def forward(x):return x * wdef loss(x, y):y_pred…

关于云服务器映像和快照的一些介绍

在云计算环境中&#xff0c;服务器映像是指一个虚拟机实例的静态快照。这种映像不仅包括操作系统、应用程序和配置&#xff0c;还包括存储的状态和数据。主要作用包括&#xff1a; 快速部署新实例&#xff1a; 可以基于现有的服务器映像快速创建新的虚拟机实例&#xff0c;节省…

java入门1.5.0

前言&#xff1a; 在java入门1.4.0中&#xff0c;我们快速构建了一个基于Maven管理的Spring boot3项目&#xff0c;对基本文件结构有了初步的认知&#xff0c;创建了git仓库 正片: 看山是山&#xff0c;看山不是山&#xff0c;看山还是山&#xff0c;下面两段代码很好了验证这…

vue3项目中浏览器打开本地文档或者下载本地应用的方法(2024-07-11)

在public文件夹下面加入预览的文件【操作说明文档】。 此文件夹不会压缩并且路径不变&#xff0c;所以是最佳的存放文件的位置。 代码&#xff1a; <template><n-icon title"操作文档" style"cursor: pointer;margin-right: 10px;" size"2…

MATLAB中使用HDL Coder生成HDL代码时的报错整理

Delay balancing unsuccessful because an extra 4 cycles of latency introduced by optimizations in the feedback loop cannot be offset using design delays for the loop latency budget. 产生原因 由于时序考虑&#xff0c;在每个模块的输出端添加了1到2级的输入输出流…