Question

我正在做一个旧教程，该教程使用VueJS框架进行拖放样式的图像上载表单：https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2我正在尝试将具有基于Axios上载服务的javascript文件替换为javascript连接到Microsoft Azure Blob存储的文件。但是，当我尝试测试Vue应用程序时，出现了一个空白屏幕，拖放界面应该在该屏幕上。

设置Microsoft Azure资源组
设置Microsoft Azure静态网站
设置Microsoft Azure blob存储帐户
在存储帐户中设置Microsoft CORS设置

这是上传服务的原始代码：

// file-upload.service.js

import * as axios from 'axios';

const BASE_URL = 'http://localhost:3001';

function upload(formData) {
    const url = `${BASE_URL}/photos/upload`;
    return axios.post(url, formData)
        // get data
        .then(x => x.data)
        // add url field
        .then(x => x.map(img => Object.assign({},
            img, { url: `${BASE_URL}/images/${img.id}` })));
}

export { upload }

这就是我尝试替换为的内容：

var blobUri = 'https://' + 'STORAGE_ACCOUNT' + '.blob.core.windows.net';
var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, 'SAS_TOKEN');
// If one file has been selected in the HTML file input element
var file = document.getElementById('fileinput').files[0];

var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
blobService.singleBlobPutThresholdInBytes = customBlockSize;

var finishedOrError = false;
var speedSummary = blobService.createBlockBlobFromBrowserFile('mycontainer', 
file.name, file, {blockSize : customBlockSize}, function(error, result, response) {
    finishedOrError = true;
    if (error) {
        // Upload blob failed
    } else {
        // Upload successfully
    }
});
refreshProgress();

预期的结果是看到拖放上传界面。实际结果：黑屏

ReferenceError：找不到变量：AzureStorage（通过Safari DevTools）

如何使用Microsoft Azure上传服务设置VueJS图像文件上传表格？

0 个答案: