账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    请问weui.js 文件上传服务器该如何返回数据?
    43
    0

    如题所示,如果上传成功返回如下结构数据

    {
        type:'',
        name:'demo.png',
        path:'/dfdfds/dxxx/demo.png'
    }

    现在问题是上传失败该如何返回数据呢?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 开船4000米舔包 普通会员 1楼

      在Weui.js中,文件上传服务器的返回数据通常可以通过以下几种方式:

      1. response.data

      在Weui.js中,response.data是返回数据的字典对象,包含了服务器返回的数据。以下是一个简单的例子:

      ```javascript // 创建上传按钮 const uploadButton = document.createElement('a');

      // 绑定点击事件 uploadButton.addEventListener('click', (e) => { // 获取文件输入框 const fileInput = document.querySelector('#fileInput');

      // 创建上传按钮的事件监听器 fileInput.addEventListener('change', (event) => { // 创建FormData对象 const formData = new FormData();

      // 设置表单元素的name属性为上传文件的名称
      formData.append('file', fileInput.files[0]);
      
      // 创建上传按钮的请求对象
      const uploadRequest = new XMLHttpRequest();
      
      // 设置请求方法为POST
      uploadRequest.open('POST', '/upload', true);
      
      // 设置请求头部的Content-Type为multipart/form-data
      uploadRequest.setRequestHeader('Content-Type', 'multipart/form-data');
      
      // 创建上传文件数据的请求对象
      const fileData = new FormData();
      fileData.append('file', formData);
      
      // 发送请求
      uploadRequest.send(fileData);
      
      // 监听上传请求的响应
      uploadRequest.addEventListener('load', () => {
        // 在这里处理上传文件的响应数据
        const response = uploadRequest.responseText;
        console.log(response);
      });
      
      // 关闭文件输入框
      fileInput.removeEventListener('change', event);
      

      }); }); ```

      在这个例子中,我们首先获取了文件输入框和一个上传按钮,然后创建了一个FormData对象,将文件上传按钮添加到这个FormData对象中,设置表单元素的name属性为上传文件的名称,然后创建了一个上传按钮的请求对象,设置请求方法为POST,请求头部的Content-Type为multipart/form-data,创建了一个文件数据的请求对象,将上传文件添加到这个文件数据对象中,然后发送了请求,最后监听了上传请求的响应。

      在响应处理部分,我们获取了上传请求的响应数据,然后可以在响应数据中根据需要进行处理,如读取文件、验证文件、写入文件等。

      1. response.data.error

      在Weui.js中,response.data.error是一个布尔值,表示上传文件是否成功。如果上传成功,这个值为true,否则为false。以下是一个简单的例子:

      ```javascript // 创建上传按钮 const uploadButton = document.createElement('a');

      // 绑定点击事件 uploadButton.addEventListener('click', (e) => { // 获取文件输入框 const fileInput = document.querySelector('#fileInput');

      // 创建上传按钮的事件监听器 fileInput.addEventListener('change', (event) => { // 创建FormData对象 const formData = new FormData();

      // 设置表单元素的name属性为上传文件的名称
      formData.append('file', fileInput.files[0]);
      
      // 创建上传按钮的请求对象
      const uploadRequest = new XMLHttpRequest();
      
      // 设置请求方法为POST
      uploadRequest.open('POST', '/upload', true);
      
      // 设置请求头部的Content-Type为multipart/form-data
      uploadRequest.setRequestHeader('Content-Type', 'multipart/form-data');
      
      // 创建上传文件数据的请求对象
      const fileData = new FormData();
      fileData.append('file', formData);
      
      // 发送请求
      uploadRequest.send(fileData);
      
      // 监听上传请求的响应
      uploadRequest.addEventListener('load', () => {
        // 在这里处理上传文件的响应数据
        const response = uploadRequest.responseText;
        if (response === 'success') {
          // 操作上传文件
          // ...
        } else {
          // 操作上传文件失败
          // ...
        }
      });
      
      // 关闭文件输入框
      fileInput.removeEventListener('change', event);
      

      }); }); ```

      在这个例子中,我们首先创建了一个上传按钮,然后创建了一个FormData对象,将上传按钮添加到这个FormData对象中,设置表单元素的name属性为上传文件的名称,然后创建了一个上传按钮的请求对象,设置请求方法为POST,请求头部的Content-Type为multipart/form-data,创建了一个文件数据的请求对象,将上传文件添加到这个文件数据对象中,然后发送了请求,最后监听了上传请求的响应。

      在响应处理部分,我们首先获取了上传请求的响应数据,然后检查响应数据是否为'success',如果是,表示上传成功,那么就可以对上传文件进行操作;如果不是,表示上传失败,那么就可以对上传文件进行操作。在实际使用中,我们可能需要根据具体情况进行判断,如上传文件的大小、类型、位置等,以决定是否进行相应的操作。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部