vue中上传文件_vue上传文件前端完整实例

vue中上传文件_vue上传文件前端完整实例input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626结果:代码:<div><span>上传文件:</span><aclass=”upload”id=”up_btn”><inputtype=”file”

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626

formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

结果:
在这里插入图片描述

代码:

<div>
                  <span>上传文件:</span>
                  <a class="upload" id="up_btn">
                    <input type="file" @change="uploadFile()" class="change" id="file1" />
                    选择文件
                  </a>

                  <a
                    :href="this.config.hostfile + file1.FilePath"
                    :download="file1.SysFileName"
                    target="_blank"
                    class="file2"
                  >{
  
  {file1.OriginName}}</a>
                </div>


import axios from "axios";
data() {
    return {
      file1: {
        name: "",
        url: "",
        download: "",
      }
      }
      }
methods:{
 uploadFile() {
      let f = document.getElementById("file1");
      if (f.files) {
        let fileList = f.files;
        let formData = new FormData();  //创建空对象
        for (let i = 0; i < fileList.length; i++) {
          //如需判断文件就在这判断 现在不判断
          formData.append("film", fileList[i]);
        }
        axios
          .post(文件上传接口, formData)
          .then((res) => {
            if (res.data.Success) {
              this.file1 = res.data.Result;
            } else {
              this.$message.error(res.Msg || "获取数据失败,无法上传");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("无法上传");
          });
      }
    }
}

.upload {
  padding: 4px 10px;
  height: 20px;
  background-color: #00b3ee;
  color: #fff;
  position: relative;
}
.change {
  position: absolute;
  top: 0;
  left: 0px;
  overflow: hidden;
  opacity: 0;
  width: 76px;
  height: 24px;
}
.file2{
  padding-left: 10px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170634.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 搭建SpringBoot源码环境的正确姿势(避坑必备)

    搭建SpringBoot源码环境的正确姿势(避坑必备)最近打算拉取SpringBoot源码,各种编译报错,各种问题。参考很多网上的教程,仍然是各种错误。最终研究出来了搭建SpringBoot源码环境的正确姿势。SpringBootGithub地址:https://github.com/spring-projects/spring-boot0、环境准备安装maven3.5或者以上版本。安装JDK8或者以上。1、fork到自…

  • java检验数组重复_java – 如何遍历数组并检查重复项?「建议收藏」

    java检验数组重复_java – 如何遍历数组并检查重复项?「建议收藏」您可以使用嵌套循环遍历数组以查看新输入是否存在.在函数中执行此操作会更好.此外,在执行此操作时,您需要确保您不在第一个元素,否则您将获得空指针异常.for(inti=0;i<=stringArray.length;i++){booleanisInArray=false;System.out.println(“\nEnterastring”);Stringinpu…

  • MATLAB GUI设计之弹出式菜单的使用

    MATLAB GUI设计之弹出式菜单的使用弹出式菜单在MATLABGUI设计中常常出现。比如串口助手、绘制图形等经常见到弹出式菜单如下图所示:使用方法:一、准备工作1、从MATLABGUIDE中拖出一个弹出式菜单2、双击这个弹出式菜单,出现检查器:将注意力放在途中红线位置处,点击string处的图标将其中的内容修改为你想要显示的内容:tag处的内容修改为自己想管这个弹出式菜单的名字。这里就按照原来

  • 细数人们对安卓的误解

    误解一:安卓是iOS的后辈不知不觉,安卓已经成为了世界上最流行的移动智能系统,就市场占有率来看,安卓甚至要高于引领了智能机和平板电脑革命的iOS。安卓的红火深远地影响了IT行业,全球最大的社交网络F

    2021年12月27日
  • java数据库系统开发案例精选_Java解析db文件

    java数据库系统开发案例精选_Java解析db文件JAVADB数据库范例关于javaDB的介绍就不说了,直接上例子。首先将derby.jar添加到classpath下面(IDE的话直接引入)importjava.sql.*;importjava.util.*;importjava.io.*;publicclassTest{publicstaticvoidmain(String[]args)throwsException{DB…

    2022年10月25日
  • laravel重定向到上一个页面怎么带参数返回 withsucess 成功提示信息

    laravel重定向到上一个页面怎么带参数返回 withsucess 成功提示信息

    2021年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号