原生方式实现图片，文件上传，和使用ElmentUI使用Drag方式自动上传图片，手动上传图片

Posted 2022-05-11 指导毕业设计Monkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生方式实现图片，文件上传，和使用ElmentUI使用Drag方式自动上传图片，手动上传图片相关的知识，希望对你有一定的参考价值。

文章目录

原生方式实现图片，文件上传

1.前端代码（后端在下面，可以共用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片显示并上传</title>

    <!-- cdn引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--cdn引入ElementUI组件必须先引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- cdn引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body> 
     <div id="app">
    <form action="http://localhost:8081/upload1/uploadFile1" method="post" enctype="multipart/form-data">
    
      <input type="file" name="file">
     
      <button type="submit">提交</button>
    </form>



   </div> 


    <script type="text/javascript">
        // 配置对象 options
        const vm = new Vue(
            // 配置选项(option)
            // element: 指定用vue来管理页面中的哪个标签区域
            el: '#app',  
            data: 
              message:"helloword",

               
           
            ,

            methods:
    


            
 
        );
    </script>
    
</body>
</html>

自动上传

1.前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<body>
		<!-- Vue开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入element样式element -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入element组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		
		<div id="app">
            message
			<h2>文件上传</h2>
			<el-upload
			  class="upload-demo"
			  drag
			  action="http://localhost:8081/upload1/uploadFile1"
			  multiple
			  :file-list="fileList"
              :on-change="onChange"
			  :on-success="handleSucess"
              :show-file-list = "true"
			  :before-upload="beforeAvatarUpload">
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		
				<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
			
			</el-upload>
			
			<h2>文件下载</h2>
			<p>模拟下载,假设下面是某个文件列表</p>
			<div @click="downFile"><i class="el-icon-document"></i>娱乐圈不为人知的秘密.pdf</div>
		</div>
		
		<script>
		  new Vue(
			  el: "#app",
			  data() 
			  	return 
					fileList: [],
					fileinfo:
						virtualPath: ""
					,
                    message:"hello",
					imageUrl:"",
			  	
			  ,
			  methods: 
                onChange(file,fileList)
        console.log("onChange执行");
        console.log(file)
        this.fileList = fileList;
        console.log(fileList,"fileList")
      ,
				beforeAvatarUpload(file) 
                    console.log(file,"file");
                    // console.log(fileList,"fileList");
					alert(file.type)
				    const isJPG = file.type === 'image/jpeg';
					const isPNG = file.type === 'image/png';
					const isPDF = file.type === 'application/pdf';
					const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
					const isXLS = file.type === 'application/vnd.ms-excel'					
				    const isLt2M = file.size / 1024 / 1024 < 2;			
				    if (!isJPG && !isPNG && !isPDF && isXLSX && isXLS) 
                        ELEMENT.Message.error("上传文件格式只能是 JPG PNG TXT PDF XLS XLSX格式!");
                        
						// this.$message.error('上传文件格式只能是 JPG PNG TXT PDF XLS XLSX格式!');
				    
				    if (!isLt2M) 
                        ELEMENT.Message.error("上传头像图片大小不能超过 2MB!");
				        // this.$message.error('上传头像图片大小不能超过 2MB!');
				    
				        return (isJPG || isPNG || isPDF || isXLSX || isXLS) && isLt2M;
				,
				//  上传成功调用此方法，可以获取到后端返回的文件名称

			  	handleSucess(response,file,fileList) 
					// alert("上传成功")
			  		console.log("存储路径:"+response.virtualPath)
					console.log("文件名:"+response.fileName)
					alert(response.fileName)
					this.fileinfo.virtualPath=response.virtualPath;
// 	文件下载的路径
					this.imageUrl = `http:/localhost:8081/upload/downloadFile1?name=$response.data`
			  	,
				downFile()
					alert("开始下载")
					//动态获取刚刚上传的文件的路径,所以必须先上传,再下载,当然你也可以把路径写死
					//实际项目中,获取目标文件路径即可,这个不是重点
					console.log(this.fileinfo.virtualPath)
					var url = "http://localhost:8080/downloadFile?filePath="+this.fileinfo.virtualPath
					//这里直接使用window.open 发起请求在新页面显示返回的内容,也可以使用axios,这样比较简单,效果类似
					window.open(url)
				
			  
		  )
		</script>
	</body>
</html>

后端代码

1. controller层

package com.qfedu.fmmall.controller;


import com.qfedu.fmmall.service.UploadService1;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.IOException;

@RestController
@CrossOrigin
@RequestMapping("/upload1")
public class UploadController1 
    @Resource
    private UploadService1 uploadService1;

    @PostMapping("/uploadFile1")
    public String uploadFile(MultipartFile file) throws IOException 
        return uploadService1.uploadFile(file);

2. service层

package com.qfedu.fmmall.service;

import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

public interface UploadService1 

    public String uploadFile(MultipartFile file) throws IOException;

3. serviceimpl

package com.qfedu.fmmall.service.impl;

import com.qfedu.fmmall.service.UploadService1;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Service
public class UploadService1impl implements UploadService1 
    @Value("$img.path")
    private String localPath;
    @Override
    public String uploadFile(MultipartFile file) throws IOException 
        System.out.println("file=" + file);
        String originalFilename = file.getOriginalFilename();
//     截取.jpg
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        String name = UUID.randomUUID().toString().substring(1, 8);

        File file1 = new File(localPath);
        System.out.println("localPath="+localPath);

        if(!file1.exists())
            file1.mkdirs();
        


        file.transferTo(new File(localPath+name+suffix));

        return name+suffix;

4. yml文件进行配置相关路径

注意一下路径后面需要加上 \\ ,需要有空格

img:
  path: D:\\img\\img2\\

ElementUI图片进行上传讲解

手动上传

el-upload组件里面加上

 ref="doctypeCrfile"
 :auto-upload="false"

在确定的这个click事件中加上

var vm = this;
vm.$refs.doctypeCrfile.submit();

在这里插入代码片

直接用这个前端代码就行：

1.直接替换自动上传的前端代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>

<body>
	<!-- Vue开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<!-- 引入element样式element -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入element组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<div id="app">

		<el-form>
			<el-form-item>

				<el-upload 
				    ref="doctypeCrfile" class="upload-demo" 
					drag
					action="http://localhost:8081/upload1/uploadFile1" 
					multiple 
					:file-list="fileList"
					:on-change="onChange" 
					:on-success="handleSucess" 
					:auto-upload="false" :show-file-list="true"
					:before-upload="beforeAvatarUpload">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				</el-upload>

				<h2>文件下载</h2>
				<p>模拟下载,假设下面是某个文件列表</p>
				<div @click="downFile"><i class="el-icon-document"></i>娱乐圈不为人知的秘密.pdf</div>

			</el-form-item>


		</el-form>

		<!-- 表单外面 -->

		<span slot="footer" class="dialog-footer">
			<el-button size以上是关于原生方式实现图片，文件上传，和使用ElmentUI使用Drag方式自动上传图片，手动上传图片的主要内容，如果未能解决你的问题，请参考以下文章 
 elmentUI中 v-loading.fullscreen实现方式
 原生JS实现异步图片上传（预览）
 elmentUI组件怎么绑定原生事件
 input实现多文件上传及图片预览
 JS实现 带有话题的文本编辑 + 图片编辑(下)
 原生图片上传与加载

原生方式实现图片，文件上传，和使用ElmentUI使用Drag方式自动上传图片，手动上传图片

文章目录

原生方式实现图片，文件上传

1.前端代码（后端在下面，可以共用）：

自动 上传

1.前端代码

后端代码

1. controller层

2. service层

3. serviceimpl

4. yml文件进行配置相关路径

手动上传

1.直接替换自动上传的前端代码

自动上传