Quasar为您提供了一种通过QUploader组件上传文件的方法。

QUploader API

用法

设计

上传多个文件

默认情况下，将分别上传多个文件（每个文件一个线程）。 如果您希望所有文件都在一个线程中上传，请使用batch属性（在下面的示例中为第二个QUploader）。

限制上传

您还可以应用自定义过滤器（在用户选择文件后执行）：

添加头部

使用headers设置附加的XHR头部，以随上传请求一起发送。 如果需要嵌入其他字段，还请检查API中的form-fields属性。

还有一个with-credentials属性，它将上传过程使用的XHR的withCredentials设置为“true”。

处理上传

工厂函数

您可以使用一个factory属性，该属性必须是一个函数。 该函数可以返回一个对象或一个用对象解决的Promise（并且如果Promise失败，则会发出@factory-failed事件）。

上述对象可以覆盖以下QUploader属性：url、method、headers、formFields、fieldName、withCredentials、sendRaw。 这个对象的属性也可以是函数（形式为(file[s]) => value）：

您还可以使用factory函数属性并立即返回相同的对象。 如果要同时设置多个属性（如上所述），这将很有用：

插槽

在下面的示例中，我们显示了等效于默认头部的内容。 还要注意一些可以使用的布尔scope属性：scope.canAddFiles、scope.canUpload、scope.isUploading。

服务器端例子

默认情况下，Quploader与HTTP（S）协议一起使用来上传文件（但不限于此，正如您将在此后面的部分中看到的那样）。

Nodejs

以下是用Node.js编写的基本服务器示例。 除了接收文件外，它什么也不做，因此请以它为起点。

const
  express = require('express'),
  app = express(),
  formidable = require('formidable'),
  path = require('path'),
  fs = require('fs'),
  throttle = require('express-throttle-bandwidth')

const
  port = process.env.PORT || 4444,
  folder = path.join(__dirname, 'files')

if (!fs.existsSync(folder)) {
  fs.mkdirSync(folder)
}

// 攻击者可以利用这个header来检测运行Express的应用程序，
// 然后发动专门的目标攻击
app.disable('x-powered-by')

app.set('port', port)
app.use(throttle(1024 * 128)) // 节流带宽

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  next()
})

app.post('/upload', (req, res) => {
  const form = new formidable.IncomingForm()

  form.uploadDir = folder
  form.parse(req, (_, fields, files) => {
    console.log('\n-----------')
    console.log('Fields', fields)
    console.log('Received:', Object.keys(files))
    console.log()
    res.send('Thank you')
  })
})

app.listen(port, () => {
  console.log('\nUpload server running on http://localhost:' + port)
})

ASP.NET MVC/Core

QUploader与Microsoft ASP.NET MVC/Core 2.x Web API后端无缝集成。 在您的Vue文件中，为QUploader组件配置所需的Web API端点：

<q-uploader
  url="http://localhost:4444/fileuploader/upload"
  label="Upload"
  style="max-width: 300px"
/>

如果您的服务器需要JWT令牌之类的身份验证，请使用QUploader的工厂函数指定QUploader将使用的xhr头部。 例如：

<template>
  <q-uploader
    label="Upload"
    :factory="factoryFn"
    style="max-width: 300px"
  />
</template>

<script>
export default {
  methods: {
    factoryFn (file) {
      return new Promise((resolve, reject) => {
        // 从您的存储中检索JWT令牌。
        const token = "myToken";
        resolve({
          url: 'http://localhost:4444/fileuploader/upload',
          method: 'POST',
          headers: [
            { name: 'Authorization', value: `Bearer ${token}` }
          ]
        })
      })
    }
  }
}
</script>

QUploader的文件有效载荷将是格式正确的IFormFileCollection对象，您可以通过ASP.NET Web API控制器的.Request属性读取该对象。 ASP.NET Core 2.2控制器：

[Route("api/[controller]")]
[ApiController]
public class FileUploaderController : ControllerBase
{
    [HttpPost]
    public async Task upload()
    {
        // 请求的.Form.Files属性
        // 将包含QUploader的文件。
        var files = this.Request.Form.Files;
        foreach (var file in files)
        {
            if (file == null || file.Length == 0)
                continue;

            // 对文件进行处理。
            var fileName = file.FileName;
            var fileSize = file.Length;
            // 保存到服务器...
            // ...
        }
    }
}

Spring

以下是Spring示例。 属性fieldName="file"与@RequestPart(value = "file")映射。

// java
@RestController
public class UploadRest {
	@PostMapping("/upload")
	public void handleFileUpload(@RequestPart(value = "file") final MultipartFile uploadfile) throws IOException {
		saveUploadedFiles(uploadfile);
	}

	private String saveUploadedFiles(final MultipartFile file) throws IOException {
		final byte[] bytes = file.getBytes();
		final Path path = Paths.get("YOUR_ABSOLUTE_PATH" + file.getOriginalFilename());
		Files.write(path, bytes);
	}
}

// html
<q-uploader field-name="file" url="YOUR_URL_BACK/upload" with-credentials />

Python/Flask

// python
from flask import Flask, request
from werkzeug import secure_filename
from flask_cors import CORS
import os

app = Flask(__name__)

# This is necessary because QUploader uses an AJAX request
# to send the file
cors = CORS()
cors.init_app(app, resource={r"/api/*": {"origins": "*"}})

@app.route('/upload', methods=['POST'])
def upload():
    for fname in request.files:
        f = request.files.get(fname)
        print(f)
        f.save('./uploads/%s' % secure_filename(fname))

    return 'Okay!'

if __name__ == '__main__':
    if not os.path.exists('./uploads'):
        os.mkdir('./uploads')
    app.run(debug=True)

支持其他服务

QUploader当前支持通过HTTP协议上载。 但是您也可以扩展该组件以支持其他服务。 例如Firebase。 告诉你如何做到。

以下是您需要提供的API的示例。 您将创建一个扩展QUploader基础的新的Vue组件，然后可以将其导入并在您的网站/应用中使用。

基本上，QUploader是QUploaderBase + xhr混入(mixin)。你的组件将是QUploaderBase + 你的服务混入(mixin)。

对于UMD版本，您可以扩展Quasar.components.QUploaderBase。

// MyUploader.js
import { QUploaderBase } from 'quasar'

export default {
  name: 'MyUploader',

  mixins: [ QUploaderBase ],

  computed: {
    // [必需]
    // 我们正在上传文件
    isUploading () {
      // 返回<Boolean>
    },

    // [可选]
    // 显示上传器顶部的覆盖层，
    // 表明它正在等待某件事
    // （阻止所有控件）
    isBusy () {
      // 返回<Boolean>
    }
  },

  methods: {
    // [必需]
    // 中止并清理
    // 正在进行的任何进程
    abort () {
      // ...
    },

    // [必需]
    upload () {
      if (this.canUpload === false) {
        return
      }

      // ...
    }
  }
}

然后在Vue中全局注册此组件，或者导入它并将其添加到Vue组件中的“components:{}”。

// globally registering your component
import Vue from 'vue'
import MyUploader from '../../path/to/MyUploader' // the file from above
Vue.component('MyUploader', MyUploader)

// or declaring it in a .vue file
import MyUploader from '../../path/to/MyUploader' // the file from above
export default {
  // ...
  components: {
    // ...
    MyUploader
  }
}