1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

 * 黏贴发送图片
 * @param e
 */
pasteData(e) {
    e.preventDefault();
let clipboardData = e.clipboardData;
if (clipboardData) { 
let items = clipboardData.items; 
if (!items) {
return;
        }
let item;
let types = clipboardData.types || [];
for (let i = 0, len = types.length; i< len; i++) {
if (types[i] === 'Files') {
                item = items[i];
break;
            }
        }
if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
            imgReader(item);
        }
    }
function imgReader(obj) {
let $messageBox=$('#message-boxID');
let file = obj.getAsFile(),
            reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
let img = new Image();
            img.src = e.target['result'];
            img.className = 'chatImg';
            $messageBox.append(img);
            setTimeout(() => {
                $messageBox.scrollTop($messageBox[0].scrollHeight);
            }, 0)
        };
    }
}

1

<input id="upImg"  name="fileTrans" type="file" (change)="onFileSelect($event)"/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 * 选择图片
 * @param event
 */
files:any[]=[];
onFileSelect(event) {
this.files=[];
let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
let file;
for (let i = 0; i < files.length; i++) {
        file = files[i];
if (this.isImage(file)) {
            file.objectURL = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(files[i])));
this.files.push(files[i]);
        }
    }
let fileUrl = file.objectURL.changingThisBreaksApplicationSecurity;
let img = new Image();
    img.src = fileUrl;
    img.className = 'chatImg';
    $('#message-boxID').append(img);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

url:string="http://localhost:8080/upload";
progress:number=0;
uploadPic(formData):Promise<any> {
let xhr = new XMLHttpRequest(),
return new Pormise(resolve,reject){
          xhr.upload.addEventListener('progress', (e: ProgressEvent) => {
if(e.lengthComputable) {
this.progress = Math.round((e.loaded * 100) / e.total);
          }
          }, false);
          xhr.onreadystatechange = () => {
if(xhr.readyState == 4) {
this.progress = 0;
if(xhr.status >= 200 && xhr.status < 300)
                      resolve({xhr: xhr, files: this.files});
else
                      reject({xhr: xhr, files: this.files});
              }
          };
          xhr.open('POST', this.url, true);
          xhr.setRequestHeader("Authorization", "Basic " + localStorage.getItem('jwt'));
          xhr.send(formData);
      }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

 * dataURL to blob, ref to https://gist.github.com/fupslot/5015897
 * @param dataURI
 * @returns {Blob}
 */
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
return new Blob([ab], {type: mimeString});
}
     * 发送消息
     * @param taskValue
     */
    sendMessage() {
let dateTime = this.dateFromat.FormatDate(new Date());
let value = $('#message-boxID').html();
let isImg = value.includes('<img');
if (isImg) {
let formData = new FormData();
let dataURL="";
let src=$(value)[0].src;
if(src.includes('data:images')){
                dataURL=src;
let blob = dataURItoBlob(dataURL);
                formData.append('file', blob);
            }else if(src.includes('blob:http')){
for(let i = 0; i < this.files.length; i++) {
                    formData.append('file', this.files[i], this.files[i].name);
                }
            }
this.uploadFileService.uploadPic(formData).then(result=>{
console.log(result);
            }).catch(err=>{
console.log('图片上传失败'+err);
            })
        }else{
        }
    }