Vue+element Upload利用http-request实现第三方地址图片上传

news2024/12/23 4:00:36

vue第三方地址图片上传+后端图片上传接口开发+postman测试图片上传

  1. Vue + element (el-upload)中的:http-request图片上传
  2. java后端上传接口,利用OSS存储图片
  3. postman测试图片上传功能及方法

Vue+element Upload利用http-request实现第三方地址图片上传

  • vue第三方地址图片上传+后端图片上传接口开发+postman测试图片上传
  • 前言
  • 一、Vue + el-upload
  • 二、实现第三方地址图片上传
    • 页面:
    • 方法:
    • 结果:
    • 前端代码:
  • 二、后端接口
    • 引入oss依赖
    • Controller层(***(@RequestParam MultipartFile file)***)
    • 接口实现
  • 三、postman测试图片上传
  • 总结


前言

使用element UI 的el-upload实现第三方地址图片上传,替换原来的action方法


一、Vue + el-upload

直接上传方法如下:上传图片根据action地址请求后获取到图片url地址

![实现类似效果](https://img-blog.csdnimg.cn/1f152975f71f486f891f9c756ce5e7e8.png
具体方法官网有定义,action为必传项
在这里插入图片描述
在这里插入图片描述

二、实现第三方地址图片上传

不使用action地址,又由于action为必传项,改为 action=" #",新增 :http-request

页面:

<el-form :model="form">
  <el-form-item label="图片" v-model="form.imageUrl">
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

方法:

methods: {
    httpRequest(data) {
      console.log("自定义上传", data);
      // 封装FormData对象
      var formData = new FormData();
      formData.append("file", data.file);
      console.log("formData",formData);
      // 调用后端接口
      uploadByServer(formData).then(res => {
        console.log(res);
      }).catch(err=>{})
    },
    beforeAvatarUpload(file) {
      //   console.log("上传前", file);
      const isImg = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      const isType = file.type === "image/png";
      const isType2 = file.type === "image/jpeg";

      if (!isType && !isType2) {
        this.$message.error("上传头像图片格式为png或jpg");
      }
      return (isType || isType2) && isImg;
    },
  }

结果:

在这里插入图片描述

前端代码:

<template>
  <div>
    <el-form :model="form">
      <el-form-item label="图片" v-model="form.imageUrl">
        <el-upload
          action="#"
          list-type="picture-card"
          :http-request="httpRequest"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {uploadByServer} from "@/api/upload";
export default {
  data() {
    return {
      form: {
        imageUrl: ""
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    httpRequest(data) {
      console.log("自定义上传", data);
      var formData = new FormData();
      formData.append("file", data.file);
      console.log("formData",formData);
      uploadByServer(formData).then(res => {
        console.log(res);
      }).catch(err=>{})
    },
    beforeAvatarUpload(file) {
      //   console.log("上传前", file);
      const isImg = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      const isType = file.type === "image/png";
      const isType2 = file.type === "image/jpeg";

      if (!isType && !isType2) {
        this.$message.error("上传头像图片格式为png或jpg");
      }
      return (isType || isType2) && isImg;
    },
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.shift();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onSubmit() {
      console.log("submit!");
    }
  },
  created() {},
  mounted() {}
};
</script>
  }

二、后端接口

利用OSS实现简单的图片上传功能:

引入oss依赖

  <dependency>
      <groupId>com.alibaba.cloud</groupId>
      <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
      <version>2.2.0.RELEASE</version>
  </dependency>

Controller层((@RequestParam MultipartFile file)

   @PostMapping("/uploadByServer")
   public R uploadByServer(@RequestParam MultipartFile file) {
       String s = bannerServiece.uploadByServer(file);
       return R.ok().put("data",s);
   }

接口实现

    public String uploadByServer(MultipartFile file) {
        // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
        String accessKeyId = "yourAccessKeyId";
        String accessKeySecret = "yourAccessKeySecret";
        // 填写Bucket名称,例如examplebucket。
        String bucketName = "examplebucket";
        // 填写Object完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。
        String objectName = "banner/uat/";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        String url = "";
        try {
            // 获取上传文件的输入流
            InputStream inputStream = file.getInputStream();
            // 获取文件原始名称
            String filename = file.getOriginalFilename();

            // 创建PutObjectRequest对象。
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName + filename, inputStream);
            // 设置该属性可以返回response。如果不设置,则返回的response为空。
            putObjectRequest.setProcess("true");
            // 调用oss方法实现上传
            // 1、bucketName 2、上传到oss文件路径和文件名称 3、文件的输入流
//            PutObjectResult putObjectResult = ossClient.putObject(bucketName, objectName + filename, inputStream);
            PutObjectResult putObjectResult = ossClient.putObject(putObjectRequest);

            // 获取url地址(根据阿里云oss中的图片实例拼接字符串) 拼接url字符串
            // https://edu-leader.oss-cn-beijing.aliyuncs.com/%E4%BB%96.jpg
            String uri = putObjectResult.getResponse().getUri();
//            url = "https://" + bucketName + "." + "oss-cn-hangzhou.aliyuncs.com" + "/" + objectName + filename;
            url = uri;
            // 关闭oss
            ossClient.shutdown();
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } catch (IOException e) {
            throw new RuntimeException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
        return url;
    }

三、postman测试图片上传

在这里插入图片描述


总结

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

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

相关文章

《花雕学AI》ChatGPT跟人类的思考方式有什么不同?

一、ChatGPT是一个基于GPT-3.5的对话语言模型&#xff0c;它可以根据用户的输入生成多轮对话&#xff0c;也可以生成文本、代码、音乐等内容。ChatGPT的思考方式是利用大量的数据和强大的算力来学习语言的联合概率分布&#xff0c;从而能够根据上下文和目标生成合理和有趣的回复…

python开发岗位需求分析,来看看它是什么一个情况吧

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 1.导入模块 import pandas as pd from pyecharts.charts import * from pyecharts import options as opts import matplotlib.pyplot as plt plt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus]Fal…

WRF模式与Python融合技术在多领域中的应用及精美绘图

当今从事气象及其周边相关领域的人员&#xff0c;常会涉及气象数值模式及其数据处理&#xff0c;无论是作为业务预报的手段、还是作为科研工具&#xff0c;掌握气象数值模式与高效前后处理语言是一件非常重要的技能。WRF作为中尺度气象数值模式的佼佼者&#xff0c;模式功能齐全…

目标检测算法——YOLOv5/v7/v8改进结合即插即用的动态卷积ODConv(小目标涨点神器)

&#x1f496;&#x1f496;>>>加勒比海带&#xff0c;QQ2479200884<<<&#x1f496;&#x1f496; &#x1f340;&#x1f340;>>>【YOLO魔法搭配&论文投稿咨询】<<<&#x1f340;&#x1f340; ✨✨>>>学习交流 | 温澜潮…

JS遍历数组里数组下的对象,根据数组中对象的某些值,组合成新的数组对象

前言: 大部分后端返回给前端的数据,是json形式的。里边包含了响应码,响应信息,有些还会返回数组对象等。现在有一个业务场景,我调用明细查询接口,返回的数据是一个对象数组的形式,但是我只需要对象中的某些属性值。这个时候我就需要想办法提取我所需要的值,然后组合成一…

吐血奉献精心整理的一大波数据集

80开源数据集资源汇总&#xff08;包含目标检测、医学影像、关键点检测、工业检测等方向&#xff09; 数据集下载汇总链接&#xff1a;https://www.cvmart.net/dataSets数据集将会不断更新&#xff0c;欢迎大家持续关注&#xff01; 小目标检测 AI-TOD航空图像数据集 数据集…

一例H-worm vbs脚本分析

样本的基本信息 MD5: c750a5bb8d9aa5a58c27956b897cf102 SHA1: e14994b9e32a3e267947cac36fb3036d9d22be21 SHA256: 1eb712d4976babf7c8cd0b34015c2701bc5040420e688911e6614b278cc82a42 SHA512: b1921c1dc7e8cf075882755be48c0d9636858cd7913188cb6c9ca6e7e741f049c143a79c683…

有哪些比较不错的AI绘画网站?

AI绘画最近非常流行。目前&#xff0c;互联网上有许多主流的人工智能绘画网站&#xff0c;但你都知道吗&#xff1f; 如果您正在寻找一个基于最先进智能技术的人工智能绘画网站&#xff0c;并介绍五个智能、现实和高效于一体的人工智能绘画网站。 1.即时AI 即时AI绘画是指通…

《RockectMQ实战与原理解析》Chapter4-分布式消息队列的协调者

4.1 NameServer 的功能 NameServer 是整个消息队列中的状态服务器&#xff0c;集群的各个组件通过它来了解全局的信息 。 同时&#xff0c;各个角色的机器都要定期向 NameServer 上报自己的状态&#xff0c;超时不上报的话&#xff0c; NameServer 会认为某个机器出故障不可用了…

基于OBS超低延迟直播实测(400毫秒左右)超多组图

阿酷TONY&#xff0c;原创文章&#xff0c;长沙。 文章简述&#xff1a;本文介绍使用OBS无延迟直播插件在第三方云平台&#xff0c;如何实现超低延时直播的完整教程&#xff08;延迟约为400毫秒左右&#xff0c;通常延迟是3-15秒&#xff09;。 OBS简要介绍 OBS&#xff08;O…

vue3+vite3+typescript实现验证码功能及表单验证

文章目录验证码组件父组件表单验证最终效果验证码组件 <template><div class"captcha" style"display: flex;"><canvas ref"canvas" width"100" height"40"></canvas></div><div class&qu…

LeetCode 1019. Next Greater Node In Linked List【单调栈模板】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

如何实现视觉识别颜色

1. 功能说明 通过摄像头识别特定颜色&#xff08;红、绿、蓝&#xff09;。摄像头采集图像信息并通过WiFi将信息传递给PC端&#xff0c;然后PC端根据比例判断出目标颜色在色盘上的所属颜色后&#xff0c;指针便会指向对应颜色。 红、绿、蓝-色块2. 电子硬件 本实验中采用了以下…

网络编程【TCP流套接字编程】

目录 TCP流套接字编程 1.ServerSocket API 2.Socket API 3.TCP中的长短连接 4.回显程序(短连接) 5.服务器和客户端它们的交互过程 6.运行结果及修改代码 TCP流套接字编程 ❗❗两个核心&#xff1a;ServerSocket Socket 1.ServerSocket API ✨ServerSocket 是创建…

RK3568平台开发系列讲解(Linux系统篇)Linux 目录结构介绍

🚀返回专栏总目录 文章目录 一、 linux 目录结构二、 linux 文件层次标准三、 linux 目录结构沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们从目录管理入手,会更直观的理解 linux 的目录结构。 一、 linux 目录结构 Linux 整个文件系统是以“ / ”目录开…

Cobalt_Strike_4.5渗透工具的安装与使用

前言&#xff1a; Cobalt Strike是一款内网渗透测试神器&#xff0c;Cobalt Strike分为客户端和服务器端&#xff0c;该服务器端被称为团队服务器&#xff0c;是Beacon有效负载的控制器&#xff0c;同时&#xff0c;cobalt strike也具有社会工程学功能&#xff0c;团队服务器还…

企业如何使用OA系统?OA系统有哪些功能和应用的场景?

企业如何使用OA系统&#xff1f;OA系统有哪些功能和应用的场景&#xff1f; 办公自动化&#xff08;Office Automation&#xff0c;简称OA&#xff09;&#xff0c;是将计算机、通信等现代化技术运用到传统办公方式&#xff0c;进而形成的一种新型办公方式。办公自动化利用现代…

02_Uboot基本命令与内存命令

目录 U-Boot命令使用 信息查询命令 环境变量操作命令 内存操作命令 U-Boot命令使用 进入uboot的命令行模式以后输入“help”或者“&#xff1f;”,然后按下回车即可查看当前uboot 所支持的命令,如图所示: 图中只是uboot的一部分命令,具体的命令列表以实际为准。图中的命令…

Mongo初遇回忆录

序 上周&#xff0c;我和M女士分手了&#xff0c;也许是上个月&#xff0c;我不知道。也许是她太墨守成规&#xff0c;也许是我太肆意妄为&#xff0c;她说我给不了她想要的平稳和安定。她没有留下太多东西&#xff0c;我也不愿留下更多回忆。 做决定的过程中&#xff0c;我比…

「计算机控制系统」4. 计算机控制系统分析

Z平面 稳定性分析 稳态误差分析 动态过程分析 频率特性 文章目录Z平面与S平面的映射关系稳定性分析离散Routh判据Jury判据离散Nyquist判据稳态误差静态误差系数动态过程频率特性Z平面与S平面的映射关系 S平面虚轴的映射 ω\omegaω与θ\thetaθ的映射 可以看出从S平面到Z平面…