如何添加属性" Alternate"到服务器上的图像文件?

时间:2016-10-18 11:21:57

标签: asp.net asp.net-web-api upload asp.net-core

我使用asp.net核心和web api上传图片。

在服务器上:

[Produces("application/json")]
[Route("api/Upload")]
public class UploadApiController : Controller
{
    private readonly IHostingEnvironment _environment;

    public UploadApiController(IHostingEnvironment environment)
    {
        _environment = environment;
    }

    [HttpPost]
    public async Task Post(ICollection<IFormFile> files)
    {
        //...
    }
}

在客户端:

// Files is an array that contains all temporary images for uploading.
let Files = [];

let image_preview = function (file) {
    file['Alternate'] = 'alternate_text';
    Files.push(file);

    // other implements...
};

$('button#upload').click(function () {
    let formData = new FormData();

    for (let i = 0; i < Files.length; i++) {
        formData.append('files', Files[i])
    }

    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/upload', true);

    xhr.onload = function () {
        console.log('uploading...')
    };  

    xhr.send(formData);  
});

快照:

1

我的问题:如何添加新属性&#34; Alternate&#34;到ICollection<IFormFile> files检测从客户端发送的属性Alternate(formData)?

1 个答案:

答案 0 :(得分:0)

这不是问题How to add property “Alternate” to an image file on server?的答案,但它似乎解决了问题(使用替代文字发送图像文件)。

在服务器上:

using Newtonsoft.Json;

[HttpPost]
public async Task Post(ICollection<IFormFile> files, IList<string> alts)
{
    IDictionary<string, string> _alts = new Dictionary<string, string>();

    foreach (var alt in alts)
    {
        IDictionary<string, string> temp = JsonConvert.DeserializeObject<Dictionary<string, string>>(alt);

        foreach (var item in temp)
        {
            _alts.Add(item.Key, item.Value);
        }

    }
}

在客户端:

for (let i = 0; i < Files.length; i++) {
    formData.append('files', Files[i]);

    let name = Files[i]['name'],
        alt = {};

    alt[name] = 'alt_text';

    formData.append('alts', JSON.stringify(alt));
}

我们永远不会在字典中获得重复密钥,因为如果我们之前检查过重复的上传文件,Files[i]['name']始终是主要的,并且无法更改(由某人黑客入侵)。

然后,我们可以将文件名(files)与Key中的_alts合并,以获取备用文字。

快照:

2

更新:快照中的代码错误。