js 上传图片并预览

发表于 更新于 分类于 阅读次数：

选择图片（其他任何文件）其实就是点击 type=file 的 input 标签，然后在 js 中获取。

1
<input type="file" multiple="multiple" accept=".jpg,.docx,.pdf"/>

multiple 属性允许同时选择多个文件，但只能一次性选择，再次点击按钮会覆盖掉之前选择的文件。

accept 属性声明了可选择文件的类型。

图片预览

本地预览图片就是为获得的图片创建一个 url，然后通过 img 标签将其显示出来。

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<input type="file" id="file_input" style="display: none;">
<button onclick="submit()">选择文件</button>

<script>
    function submit() {
        let input = document.getElementById('file_input');
        input.click();
        
        // 监听 input 值的变化
        input.onchange = function(event) {
            let file = event.currentTarget.files[0];  // 获取文件
			
            // file 的属性
            let name = file.name;
            let type = file.type;
            let size = file.size;

            // 创建 <img> 标签
            let image = document.createElement('img'); // 也可以写为：let image = new Image()
            // 图片加载成功执行
            image.onload = function() {
                console.log('success');
            }
            // 为 img 标签设置样式
            image.src = window.URL.createObjectURL(file);
            image.width = 100;
            image.height = 100;
            // 添加到 body 中，不然显示不出来
            document.body.appendChild(image);
        }
    }

</script>

图片上传

使用原生组件上传

向后端发送文件时一般使用 application/form-data 的形式，如果我们不想用表单发送，可以通过 FormData 类对数据进行包裹，以达到和表单发送一样的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="file" multiple="multiple" accept=".jpg,.png" @change="change"/>

<script>
    change(event) {
        // 原生js获取的DOM集合是一个类数组对象，所以不能直接利用数组的方法，需转换
        const files = Array.from(event.currentTarget.files);

        files.forEach(async file => {
            const formData = new FormData();
            formData.append('file', file, file.name);
            const {data} = await axios.post('http://127.0.0.1:5000/request', formData);
            console.log(data);
        });
    }
</script>
使用 el-upload 上传
1
2
3
4
5
6
7
8
9
10
11
12
13
<el-button @click="submit">上传</el-button>
<el-upload 
           ref="upload" 
           action="" 
           :auto-upload="false" 
           drag 
           :file-list="fileList" 
           multiple 
           :http-request="upload" 
           list-type="picture">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

el-upload 默认自动向 action 的 url 发送请求，如果想手动发送文件，可以进行如上的配置。

需要注意的是， this.$refs.upload.submit() 方法会自动触发 :http-request 绑定的函数。

js 代码如下：

1
2
3
4
5
6
7
8
9
10
submit() {
    this.$refs.upload.submit();
},

async upload(data) {
  const formData = new FormData();
  formData.append('file', data.file);
  const res = await axios.post('http://192.168.31.196:5000/request', formData);
  console.log(res);
},