原生js实现打开手机相册并上传文件到服务器

原创已于 2022-12-06 14:28:54 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-12-06 14:27:35 首次发布

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现从手机相册选择图片并上传到服务器的方法。通过创建一个隐藏的input元素并设置为file类型来触发手机相册，再通过Promise处理文件选择事件，最后利用FormData对象封装文件以便发送到服务器。

js实现上传文件服务器，打开手机相册

在common文件夹中封装公共方法

 // 上传照片
  upimage () {
    //  打开手机相册
    return new Promise((resolve, reject) => {
      let input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.setAttribute('accept', 'image/*')
      input.click()
      input.onchange = function () {
        let file = this.files
        resolve(file[0])
      }
    })
  },

在页面使用该方法时，定义一个点击事件@click=“uploadImg”

 // 上传照片
    uploadImg() {
      // 引用upimage的公共方法并接收回传参数  
      this.$_upimage().then((res) => {    
      //定义一个空的formData对象    
        let formData = new FormData()
        //将res存入formData的append中 
        formData.append('file', res)
        // 调用上传文件接口，将文件上传服务器
        。。。
        })
      })
    },