普通静态HTML中集成VUE并且实现图片上传功能使得本地图片变成在线访问

2022-04-24 09:05:15

一、创建普通HTML网页文件，引入vue.js和axios.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file upload</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body> 
</body> 
</html>

二、编写文件选择及图片显示功能

<div id="app">       
        <img :src="this.picSrc" width="400" height="300"><br/>
        <input type="file" ref="inputer"/><br/>       
        <input type="button" value="上传" @click="uploadFile()"/><br/>       
    </div>

三、向后端发出上传请求，上传成功后得到该图片的在线地址（可以直接将此地址复制到浏览器在线查看图片）

<script>
    Vue.prototype.$axios = axios;
        var vm = new Vue({
            el: ‘#app‘,
            data: {             
                picSrc:‘‘,
                filem:‘‘,
            },            
              methods: {
                // 点击事件
                uploadFile() {
                    //获取用户选择的文件
                    let inputDOM = this.$refs.inputer;
                    this.filem = inputDOM.files[0];
                    // 向后台传递数据:
                    var formData = new FormData();
                    // 向formData中添加数据:
                    formData.append("file",this.filem);    
                    
                    this.$axios({
                        method: "post",
                        url: "http://localhost:8888/shopping-content/uploadFile",//不要忘了修改自己的后端地址//我后端使用Springcloud并且配置Zuul网关做了跨域处理，如果你遇到跨域问题请自行处理
                        data: formData,
                        headers:{‘Content-Type‘:undefined}
                    })
                    .then(successResponse => {
                            this.picSrc = successResponse.data.message;
                    })
                }
            }
        });
    </script>

四、前端页面完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file upload</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body> 
    <div id="app">       
        <img :src="this.picSrc" width="400" height="300"><br/>
        <input type="file" ref="inputer"/><br/>       
        <input type="button" value="上传" @click="uploadFile()"/><br/>       
    </div>    
    <script>
    Vue.prototype.$axios = axios;
        var vm = new Vue({
            el: ‘#app‘,
            data: {             
                picSrc:‘‘,
                filem:‘‘,
            },            
              methods: {
                // 点击事件
                uploadFile() {
                    //获取用户选择的文件
                    let inputDOM = this.$refs.inputer;
                    this.filem = inputDOM.files[0];
                    // 向后台传递数据:
                    var formData = new FormData();
                    // 向formData中添加数据:
                    formData.append("file",this.filem);    
                    
                    this.$axios({
                        method: "post",
                        url: "http://localhost:8888/shopping-content/uploadFile",
                        data: formData,
                        headers:{‘Content-Type‘:undefined}
                    })
                    .then(successResponse => {
                            this.picSrc = successResponse.data.message;
                    })
                }
            }
        });
    </script>
</body>
</html>

file.html

五、后端Controller实现

@RequestMapping("/uploadFile")
    public Result uploadFile(MultipartFile file){
        try {
            //设置虚拟的映射路径 --文件上传后放到哪里去--可以是服务器盘--这里先放到D盘
            String path="D:/file";

            //返回一个路径，用户访问此路径得到该图片
            String url = "";

            if (file!=null && file.getSize()>0) {
                //上传后的保存
                file.transferTo(new File(path, file.getOriginalFilename()));

                //前缀部分与MvcWebConfig中设置的映射路径保持一致/upload/**
                //http://localhost:8081为后端项目的地址，为服务的提供者
                url = "http://localhost:8081/upload/"+file.getOriginalFilename();
            }
            return new Result(true, url);
        } catch (IOException e) {
            e.printStackTrace();
            return new Result(false, "上传失败");
        }
    }

六、经过上述步骤后已经将文件上传到了你指定的地方，并且返回此文件的地址，按道理来说访问此路径会看到图片，但是呢.....能访问到才怪，文件路径中的/upload是哪来的？这需要做个映射，编写工具类，放在utils包下或config包下或其他包下

都行，记得加注解@Configuration和保持两个路径的一致

package com.star.utils;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class MvcWebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //addResourceHandler表示映射路径--与步骤五中的URL的http://localhost:8081后的部分保持一致

        //addResourceLocations表示物理路径 --与服务器将你上传的文件存放的地方的路径保持一致，即步骤五中的path路径 
        registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/file/");
 　　} 
}

七、选择图片上传可以看到上传成功并可以正常显示了

普通静态HTML中集成VUE并且实现图片上传功能使得本地图片变成在线访问

码农公寓

相关文章