前端如何通过文件路径上传本地文件?

新手上路,请多包涵

已知晓本地文件的一个路径
如何通过这个本地文件的一个路径上传到服务器
例如:
file:///C:/Users/18155/AppData/Local/Temp/ksohtml/wpsC223.tmp.jpg
这个是我已知晓的文件路径,如何通过这个路径把文件通过后端提供的接口上传到服务器上

回复
阅读 2.3k
7 个回答

做不了,需要使用文件选择器<input type='file' />自己选择

这种上传一般都是需要用户选中对应文件上传的。选中后可以获取的文件的信息,再传递到后端接口进行处理,上传服务器。
如果你是用element-ui的upload组件实现。
关键点:

  • action: 上传的地址,最好设置成一个变量绑定上去,需要根据环境变量来切换请求服务器的地址。
  • before-upload:上传文件之前的钩子,参数为上传的文件, 若返回false或者返回 Promise 且被 reject,则停止上传。可以在这里限制文件特殊格式、大小等。
    更多的配置可以查询一下文档

也可以使用原生input

<input
  type="file"
  :value="imgFile"
  ref="selectImg"
  accept="image/png, image/jpeg, image/jpg"
  @change="uploadImg($event)"
/>

在change事件里校验文件是否合法,若合法则调用后端接口进行上传。

不可能直接上传电脑上的文件的.

就像一层说的, 加个input让用户选择, 或者放个div让用户把文件拖动到div上.

前端没法通过文件路径访问文件内容,只能由用户操作选中文件,也是出于安全考虑。

如果是复制过程上传图片,可以试试监听paste事件。

我记得浏览器不会给做这种不安全的操作,可以试试electron,electron应该可以

解决方案可参考:

vue完整上传图片(阿里云OSS)

  1. 简略的布局(样式以去除)
    左边是图片浏览,右边是一个input和一个span,当然span是可以自己去设计的,input是隐藏的通过点击外层div来触发它的onclick事件。
 <!--这里展示大图-->
          <div class="full_image" v-if="full_image">
                  <img :src="full_image" style="border-radius:3px">
                  <span style="position:absolute;right:10px;top:8px;font-size:16px;font-weight:400;cursor:pointer;user-select:none" @click="full_image=''">X</span>
          </div>
          <!--上传图片-->
          <div >
          <!--缩略图-->
            <div  v-if="images">
              <img :src="image.url" v-for="(image,index) in images" :key="index" @click="showImage" :data-url="image.url+''" style="cursor:pointer;">
            </div>
            <!--上传图片-->
            <div  @click="uploadImage">
              <div style="width:80px;height:80px">
                <input type="file" ref="image_input" accept=".png,.jpg,.jpeg" @change="imageSelect" hidden>
                <span>+</span><span>上传图片</span><span>({{images.length}}/6)</span>
              </div>
            </div>
          </div>
          <button @click="submit">提交</button>
  1. images是一个数组存放已选择的图片文件base64编码
    full_image点击缩略图时将base64放进去以显示大图,files用户选择的文件都放进去,image_urls是上传后返回的url;注意base64编码是为了不上传图片到服务器也能在页面预览

// 这里使用阿里的oss上传图片,导入oss
import { ossTempAuth } from '@/api/oss'
import OSS from 'ali-oss';
  data() {
    return {
      images: [], 
      full_image: '', // 当前放大图片base64码
      files: [], // 图片File实例
      image_urls: [], // 图片上传后返回url
    };
  },
  1. 这里是事件方法
// 点击图片div时触发input:click
    uploadImage() {
      this.$refs.image_input.dispatchEvent(new MouseEvent('click'));
    },
    // 点击缩略图时展示图片
    showImage(event) {
      this.full_image = event.target.dataset.url;
    },
    // uploadImage函数触发input的onclick事件,选择文件
    imageSelect(event) {
      // 判定文件列表
      let file = event.target.files[0];
      for (let i = 0; i < this.images.length; i++)
        if (file.name == this.images[i].name) return;
      // 新建文件实例
      let ofReader = new FileReader();
      // 读取文件流
      ofReader.readAsDataURL(file);
      // 转为base64码
      ofReader.onload = evo => {
        let base64 = evo.target.result;
        // 将图片base64码放进去数组,以便能够实时预览
        this.$set(this.images, this.images.length, { name: file.name, url: base64 });
        this.files.push(file);
      }
    },
  1. 上传
//按钮点击
    submit(){
        this.uploadFiles();
    },
//准备上传
    async uploadFiles() {
      var self = this;
      // 获取已经选择的文件流
      var files = this.files;
      var video = this.video_file;
      // 获取秘钥信息
      let authConfig = await ossTempAuth();
      let back = authConfig.data;
      // 实例化OSS
      const client = await new OSS({
        region: back.region,
        accessKeyId: back.AccessKeyId,
        accessKeySecret: back.AccessKeySecret,
        bucket: back.bucket,
        stsToken: back.SecurityToken,
      });
      // 上传图片
      async function uploadImage() {
        try {
          for (let i = 0; i < files.length; i++) {
            let name = files[i].name;
            let index = name.lastIndexOf(".");
            let ext = name.substr(index + 1);
            const result = await client.put(
              'hummingbird_v2/returns/pic/' + new Date().getTime() + self.uuid(10, 16) + i + '.' + ext,
              files[i],
              {
                'Content-Encoding': 'UTF-8',
                'Expires': 'Wed, 08 Jul 2030 16:57:01 GMT',
                  }
            );
            self.image_urls[i] = result.url;
          }
        } catch (e) {
          this.model_upload = false;
          console.log("上传图片失败", e);
        }
      }
      // 调用上传
      if (files.length > 0) uploadImage();
    },

相关链接:
vue完整上传图片(阿里云OSS)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏