vue上传图片到服务器

vue上传图片到服务器

---

我们做的商家管理系统需要在添加一道菜的时候把图片上传到服务器，
流程大概是这样子的：

1. 搭建一个文件服务器（可以与你的网站后台放在同一台物理机上）
2. 网站后台提供上传图片的API
3. 前端接收图片后把图片转成base64字符串，调用API上传图片
4. 后台接收到base64，把base64转成图片，存到文件服务器里面，根据存储的路径生成图片的url
5. 后台把图片的url返回给前端
6. js接收到url之后把url赋给<img>的src

本文仅介绍前端需要的操作，即步骤3、6

<template>
    <div>
        <!-- 选择图片 -->
        <input type="file"
               accept="image/*"
               @change="chooseImg" />
        <!-- 预览图片 -->
        <canvas ref="imgPreview"
                height="0"
                width="0"></canvas>
        <!-- 提交图片 -->
        <button @click="uploadImg">提交图片</button>
        <!-- 通过后台返回的url向文件服务器请求图片 -->
        <img :src="imgUrlFromServer">
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name: 'uploadImg',
    data () {
        return {
            imgUrlFromServer: '#',
            base64: ''
        }
    },
    methods: {
        chooseImg (event) {
            let file = event.target.files[0]
            let reader = new FileReader()
            let img = new Image()
            // 读取图片
            reader.readAsDataURL(file)
            // 读取完毕后的操作
            reader.onloadend = (e) => {
                img.src = e.target.result
                // 这里的e.target就是reader
                // console.log(reader.result)
                // reader.result就是图片的base64字符串
                this.base64 = reader.result
            }
            // 预览图片
            let canvas = this.$refs['imgPreview']
            let context = canvas.getContext('2d')
            img.onload = () => {
                img.width = 100
                img.height = 100
                // 设置canvas大小
                canvas.width = 100
                canvas.height = 100
                // 清空canvas
                context.clearRect(0, 0, 100, 100)
                // 画图
                context.drawImage(img, 0, 0, 100, 100)
            }
        },
        uploadImg () {
            axios.post('http://1.2.3.4:8080/uploadImg', {
                img: this.base64
            }).then(response => {
                this.imgUrlFromServer = response.data.imgUrl
            })
        }
    }
}
</script>

在选择图片后，<canvas>里会有图片的预览，当把图片上传到服务器后，前端收到图片的url，<img>里就会显示刚才添加的图片