vue选择本地图片上传服务器并展示

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

已于 2022-10-26 11:00:06 修改

阅读量872

点赞数

分类专栏： vue 文章标签： 1024程序员节

于 2022-10-24 14:04:48 首次发布

本文链接：https://blog.csdn.net/qq_41241504/article/details/127491505

版权

本文介绍了如何在Vue项目中实现从本地选取图片，然后上传到服务器并展示的完整流程。涉及到文件读取、axios使用以及前端与后端的交互等技术。

摘要由CSDN通过智能技术生成

<div class="margin flexClom">
              <div class="psImg">
                <img :src="img " alt="">
              </div>
              <button class="btn" style="width: 100%;">
                <input type="file" multiple="multiple" style="width: 100%;" ref="filei"  v-on:change="up">
              </button>
            </div>

  // 选择文件
      up(e) {
        console.log(666666666, e.target.dataset.index)
        const that = this
        // 获取待上传的文件对象
        let file = e.target.files[0]
        // 声明一个读取文件对象
        let reader = new FileReader();
        // 开始读取文件内容
        reader.readAsDataURL(file);
        // 读取操作结束时触发
        reader.onloadend = (ev) => {
          // 赋值给vue对象属性

          this.tempImg = ev.target.