坑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;点击创建新项…

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;更新…

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

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

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级的输入输出流…

深圳比创达|EMC与EMI测试整改:打造电磁“绿色”产品的必经之路4

深圳比创达&#xff5c;EMC与EMI测试整改&#xff1a;打造电磁“绿色”产品的必经之路 随着电子技术的飞速发展&#xff0c;电子设备在日常生活和工业生产中的应用越来越广泛。然而&#xff0c;这些设备在运行时产生的电磁辐射&#xff08;EMI&#xff09;和对外界电磁干扰的敏…

java基础复习

初识 JDK&#xff08;开发包&#xff09; JRK&#xff08;运行环境&#xff09; 解释型语言 数据类型&#xff1a; 基本数据类型&#xff1a;byte short int(默认) long float double(默认) char boolean 引用数据类型&#xff1a;类 接口 数组 扩展&#xff1a; BigDecimal…

从人工巡检到智能预警:视频AI智能监控技术在水库/河湖/水利防汛抗洪中的应用

一、背景需求分析 近日&#xff0c;我国多省市遭遇连日暴雨&#xff0c;导致水库、湖泊、河道等水域水位暴涨&#xff0c;城市内涝频发。随着夏季汛期的到来&#xff0c;降雨天气频繁&#xff0c;水利安全管理面临严峻挑战。为保障水库安全、预防和减少洪涝灾害&#xff0c;采…

MVC分页

public ActionResult Index(int ? page){IPagedList<EF.ACCOUNT> userPagedList;using (EF.eMISENT content new EF.eMISENT()){第几页int pageNumber page ?? 1;每页数据条数&#xff0c;这个可以放在配置文件中int pageSize 10;//var infoslist.C660List.OrderBy(…

7.11 cf div3 A

Problem - A - Codeforces 题目概述 求最少问题数量&#xff0c;以确保能举办m轮比赛&#xff0c;每轮包含一个难度级别为 ‘A’ 到 ‘G’ 的问题。 ac代码 #include<bits/stdc.h> typedef long long ll;#define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0) …

最新 Kubernetes 集群部署 + flannel 网络插件(保姆级教程,最新 K8S 1.28.2 版本)

资源列表 操作系统配置主机名IP所需插件CentOS 7.92C4Gk8s-master192.168.60.143flannel-cni-plugin、flannel、coredns、etcd、kube-apiserver、kube-controller-manager、kube-proxy、 kube-scheduler 、containerd、pause 、crictlCentOS 7.92C4Gk8s-node01192.168.60.144f…