图片上传项目 | 郭旭升博客主页

Project Progress（Three steps）

UI and function of Uploader
UI is done, function includes two parts:

drag and drop
点击上传本地文件

UI 上传过程（开始上传和上传完整之前显示）
UI 上传完成，展示后端响应的图片和链接待做。

Drag and drop 页面两个功能的实现方法

将文件拖拽到浏览器并传输过程：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
点击按钮打开本地文件夹，并上传文件的方法？如何控制上传文件的类型，如何获取上传文件的进度？
实现方法：
http://doc.ruoyi.vip/ruoyi-vue/document/htsc.html#%E4%B8%8A%E4%BC%A0%E5%AE%9E%E7%8E%B0%E6%B5%81%E7%A8%8B

前端技术点：

文件对象的获取，Input type = file
axios post请求请求体头：”Content-type”: “multipart/form-data”
vue路由，文件上传时，转换到上传过程页面，上传完成转换到上传完成页面，之后可以回到主页上传页面。
这三个显示画面之间的转换，最终实现用的是组件之间的状态转换，根据上传的状态转换一个状态，根据状态展示一个组件。
将子组件的值传递给父组件，利用事件触发，$emit。

问题

如何将子组件的属性值传递给父组件？
$emit
一个组件是否可以有两个不同的监听事件？

前端细节实现

标签
通过触发事件，获取到输入的文件

通过formdata封装文件，放在请求体中，给服务端发送post请求。

const uploadForm = document.querySelector('.upload')
uploadForm.addEventListener('submit', function(e) {
   e.preventDefault()
   let file = e.target.uploadFile.files[0]
   //formdata来保存文件
   let formData = new FormData()
   formData.append('file', file)
   
   fetch('http://localhost:3000/upload_files', {
      method: 'POST',
     //将formdata放入请求体
     body: formData
   })
   .then(resp => resp.json())
   .then(data => {
      if (data.errors) {
         alert(data.errors)
      }
      else {
         console.log(data)
      }
   })
})

显示界面的变换

未选择好要发送的图片之前，显示图片选择界面
选择好开始发送，发送中，到发送完成，显示发送过程中界面
收到服务端回复，显示服务端发送回来的图片URL

后端实现细节

uploading image to a static folder in the server
downloading image from server with the link
display list of images
Java实现
资源：https://www.bezkoder.com/spring-boot-image-upload-thymeleaf/
文件处理类：MultipartFile

Service类实现思路：

设置接收文件路径
创建文件路径
保存文件

ImageModel：
属性： name、URL 用这两个属性来描述一个图片。

what i learned

This is my First time full stack project experience, first time work with Vue.
I learn a new frontend framework, and i build a project with it from scratch.
I feel pretty much a sense of accomplishment.

There would be more than one solution to approach a project. New technology will make some feature easier to build, but more complexity it brings too.

A long way to go, i learn some skills of Vue to build the featrues i need in my project, but there is a way more to learn to master Vue. To learn as i need, save time and high effciency.
Learn and Build is a good way to learn new techs, as you can’t learn everything before you start to build something.

项目架构设计

组件：

图片上传组件
图片传输过程组件
图片上传完成组件

核心过程：

上传前进入上传组件。
上传请求发出后，进入传输过程组件。（利用axios.interceptors.request.use 拦截器获取请求开始状态，触发事件开始）
传输请求返回后，收到response，显示图片上传完成组件。（利用axios.interceptors.response.use 拦截器获取响应状态，触发事件完成）

所以核心过程围绕着一个请求的全过程来进行组件的显示。
通过 v-show 即可。 v-if v-else条件判断
通过promise编程，异步请求，请求回复成功或者失败，有状态fulfilled，得到返回体。

核心上传请求功能：（Post）

上传对象：

图片

返回对象：

图片
图片链接

前端核心技术

异步编程
promise（promise返回对象的各种状态，开始到完成）

后端技术

静态资源的访问控制（图片）
对于传到前端的图片可以考虑URL做一个封装或者啥，效果就是不能通过直接搜URL来获取图片资源，必须经过前端应用页面来操作。
唯一识别一个静态资源（这里是图片），通过ID，也可以对应生成UUID，这样就不会暴露资源具体是第几个，一共有多少个，如果不想暴露的话。