.net core的WebAPI+Vue2实现调用设备拍照上传图片功能

在工作中有时候会遇到上传文件上传图片或者拍照上传图片功能。这时候底下的内容就有可能可以帮助到你。后端的支持上传图片和上传文件功能。前端如果你选择普通上传功能就是普通上传功能，我这里选择的是调用相机设备实现拍照上传图片功能。

1.首先这是后端的控制器接口。

 1 /// <summary>
 2 /// 文件上传
 3 /// </summary>
 4 /// <param name="formFile"></param>
 5 /// <returns></returns>
 6 [HttpPost]
 7 [Route("AndonUploadFile")]
 8 public async Task<JsonResult> AndonUploadFile(IFormFile formFile)
 9 {
10     return await _andonconfigAppService.UploadFile(formFile);
11 }

2.这是控制器调用的服务层，中间会调用一些私有方法，如获取文件位置，我会列出来。至于存储的位置，这个得根据情况自己调整。

 1 /// <summary>
 2 /// 异步图片或文件上传
 3 /// </summary>
 4 /// <param name="formFile"></param>
 5 /// <returns></returns>
 6 public async Task<JsonResult> UploadFile(IFormFile formFile)
 7 {
 8     string extensions = null;
 9     //取文件名
10     var fullName = GetFullFileName(extensions, true);
11  
12     var savePath = GetFileSavePath(fullName);
13  
14     var FolderPath = Path.GetDirectoryName(savePath);
15     
16  
17     //上传文件重命名 获取上传文件的扩展名
18     var FilePath = $"/{DateTime.Now.ToString("yyyyMMddHHmmssfff")}{Path.GetExtension(formFile.FileName)}";
19  
20     //如果 path 指向现有目录，则为 true；如果该目录不存在或者在尝试确定指定目录是否存在时出错，则为 false。
21     if (!Directory.Exists($"{_env.WebRootPath}{FolderPath}"))
22         //创建新的指定目录
23         Directory.CreateDirectory($"{_env.WebRootPath}{FolderPath}");
24  
25     //using释放非托管资源 {env.WebRootPath}{FolderPath}{FilePath} 文件路径+文件名称
26     //FileMode 指定操作系统打开文件的方式
27     //OpenOrCreate指定操作系统应打开文件（如果文件存在）；否则，应创建新文件
28     using (FileStream fs = new FileStream($"{_env.WebRootPath}{FolderPath}{FilePath}", FileMode.OpenOrCreate))
29     {
30         //异步获取文件内容
31         await formFile.CopyToAsync(fs);
32     }
33  
34     //返回图片的文件夹路径+名称
35     return new JsonResult(new
36     {
37         FilePath = $"{FolderPath}{FilePath}"
38     });
39 }

 获取文件名 GetFullFileName()  (注：这是我写的一个根据日期实现文件重命名的方法，你可以使用，也可以丢弃)

 1 /// <summary>
 2 /// 获取完整的文件名
 3 /// </summary>
 4 /// <param name="extensions"></param>
 5 /// <param name="isByDate"></param>
 6 /// <returns></returns>
 7 private string GetFullFileName(string extensions, bool isByDate = true)
 8 {
 9     if (isByDate)
10         return $"{DateTime.Now.ToString("yyyyMMdd")}\\{DateTime.Now.ToString("HHmmssffff")}{extensions}";
11     else
12         return $"{DateTime.Now.ToString("yyyyMMddHHmmssffff")}{extensions}";
13 }

获取文件的路径

 1 /// <summary>
 2 /// 获取文件保存路径
 3 /// </summary>
 4 /// <param name="filePath"></param>
 5 /// <returns></returns>
 6 public string GetFileSavePath(string filePath)
 7 {
 8     return Path.Combine(GetSaveDirectory(), filePath);
 9 }
10  
11  
12 private string _saveDirectory = string.Empty;
13  
14 /// <summary>
15 /// 获取存储路径
16 /// </summary>
17 /// <returns></returns>
18 internal string GetSaveDirectory()
19 {
20     if (_saveDirectory != string.Empty)
21         return _saveDirectory;
22  
23     var dic = Directory.GetParent(AppContext.BaseDirectory)?.Parent;
24  
25     if (dic != null)
26         _saveDirectory = Path.Combine(dic.FullName, "Attachment");
27  
28     return _saveDirectory;
29 }

3.前端vue2  通过点击按钮实现拍照然后把照片传给后端接口实现上传功能。

 1 <template>
 2   <div>
 3     <video ref="video" width="300" height="300" style="display: none"></video>
 4     <canvas ref="canvas" width="300" height="300" style="display: none"></canvas>
 5     <button @click="takePhoto">拍照</button>
 6   </div>
 7 </template>
 8  
 9 <script>
10 export default {
11   mounted() {
12     navigator.mediaDevices.getUserMedia({ video: true })
13       .then(stream => {
14         this.$refs.video.srcObject = stream;
15         this.$refs.video.play();
16       })
17       .catch(error => {
18         console.error('无法访问摄像头', error);
19         alert("无法访问摄像头")
20       });
21   },
22   methods: {
23     takePhoto() {
24       const context = this.$refs.canvas.getContext('2d');
25       context.drawImage(this.$refs.video, 0, 0, 300, 300);
26       this.$refs.canvas.toBlob(blob => {
27         this.uploadPhoto(blob);
28       }, 'image/jpeg');
29     },
30     uploadPhoto(blob) {
31       const formData = new FormData();
32       formData.append('formFile', blob, 'photo.jpg');
33  
34       fetch('http://localhost:44370/api/MES/AndonConfig/AndonUploadFile', {
35         method: 'POST',
36         body: formData
37       })
38       .then(response => {
39         if (response) {
40           console.log('图片上传成功');
41           alert("图片上传成功")
42         } else {
43           console.error('图片上传失败');
44           alert("图片上传失败")
45         }
46       })
47       .catch(error => {
48         console.error('请求错误', error);
49         alert("请求错误")
50       });
51     }
52   }
53 }
54 </script>

OK，这是我实现拍照上传照片的整个过程。中间的一些存储位置、请求地址会根据自己的情况进行调整。

希望可以通过这篇文章帮助到你。